Ionic 3自定义组件技术问询：组件使用、ComponentsModule解析及布局实现

Hey there! Let's walk through your questions step by step to get you sorted with custom components in your Ionic 3 project:

1. How to use common custom components in specific pages (Ionic 3)? #

It's straightforward once you have your shared components module set up. Here's what you need to do:

• Step 1: Make sure your custom component (like HeaderComponent) is declared and exported in your ComponentsModule (we'll cover this module next).
• Step 2: Open the module file of the page where you want to use the component (e.g., HomePageModule).
• Step 3: Import ComponentsModule into the imports array of the page's @NgModule decorator:

  import { NgModule } from '@angular/core';
  import { IonicPageModule } from 'ionic-angular';
  import { HomePage } from './home';
  import { ComponentsModule } from '../../components/components.module'; // Adjust the path as needed
  
  @NgModule({
    declarations: [HomePage],
    imports: [IonicPageModule.forChild(HomePage), ComponentsModule]
  })
  export class HomePageModule {}
  

• Step 4: Now you can use the component directly in your page's HTML template. For example:

  <app-header></app-header>
  <!-- Rest of your page content -->
  

• Note: Only the pages whose modules import ComponentsModule will have access to these custom components—perfect for using them in specific pages rather than app-wide.

2. What's the purpose and usage of components.module.ts? #

Let's break down this file and its role:

Purpose #

This is an Angular shared module designed to centralize your custom components. Instead of declaring the same component in every page's module (which would cause errors and redundancy), you declare them once here and export them. This makes your components reusable across any page that imports this module.

Explanation of the provided code #

import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header';

@NgModule({ 
  declarations: [HeaderComponent], // Registers the component with Angular so it's recognized
  imports: [], // No external modules needed for this component right now
  exports: [HeaderComponent] // Makes the component available to other modules that import ComponentsModule
})
export class ComponentsModule {}

Usage #

• Add new components: When you create a new custom component, import it into ComponentsModule, add it to both the declarations and exports arrays (if you want to reuse it elsewhere).
• Use in pages: As shown in the first question, import ComponentsModule into the page's module where you want to use the component.

3. How does this file help implement custom layouts for specific pages? #

This module is key to creating consistent, maintainable custom layouts for specific pages:

• Reusable layout components: Let's say your HeaderComponent includes a custom navigation bar, logo, and user profile section—this is a core part of your page layout. By putting it in ComponentsModule, you can drop it into any page that needs this exact header without rewriting code.
• Consistency: If you need to update the header's styling or functionality, you only have to modify HeaderComponent once. Every page that uses it will automatically get the update, ensuring your layout stays consistent across all relevant pages.
• Selective application: Since you only import ComponentsModule into the pages that need the custom layout components, you don't force these components on pages that don't require them. This keeps your app lean and focused.
• Reduced redundancy: Without this module, you'd have to declare HeaderComponent in every page's module that uses it. That's repetitive and increases the chance of errors—this module eliminates that hassle.

内容的提问来源于stack exchange，提问作者Abdul Hameed