共享特性模組link

Sharing moduleslink

建立共享模組能讓你更好地組織和梳理程式碼。你可以把常用的指令、管道和元件放進一個模組中，然後在應用中其它需要這些的地方匯入該模組。

Creating shared modules allows you to organize and streamline your code. You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your app.

想象某個應用有下列模組：

Consider the following module from an imaginary app:

      
        content_copy
      
      import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CustomerComponent } from './customer.component';
import { NewItemDirective } from './new-item.directive';
import { OrdersPipe } from './orders.pipe';

@NgModule({
 imports:      [ CommonModule ],
 declarations: [ CustomerComponent, NewItemDirective, OrdersPipe ],
 exports:      [ CustomerComponent, NewItemDirective, OrdersPipe,
                 CommonModule, FormsModule ]
})
export class SharedModule { }
    

請注意以下幾點：

Note the following:

• 它匯入了 CommonModule，因為該模組需要一些常用指令。

  It imports the CommonModule because the module's component needs common directives.

• 它宣告並匯出了一些工具性的管道、指令和元件類別。

  It declares and exports the utility pipe, directive, and component classes.

• 它重新匯出了 CommonModule 和 FormsModule

  It re-exports the CommonModule and FormsModule.

透過重新匯出 CommonModule 和 FormsModule，任何匯入了這個 SharedModule 的其它模組，就都可以訪問來自 CommonModule 的 NgIf 和 NgFor 等指令了，也可以繫結到來自 FormsModule 中的 [(ngModel)] 的屬性了。

By re-exporting CommonModule and FormsModule, any other module that imports this SharedModule, gets access to directives like NgIf and NgFor from CommonModule and can bind to component properties with [(ngModel)], a directive in the FormsModule.

即使 SharedModule 中宣告的元件沒有繫結過 [(ngModel)]，而且 SharedModule 也不需要匯入 FormsModule，SharedModule 仍然可以匯出 FormsModule，而不必把它列在 imports 中。 這種方式下，你可以讓其它模組也能訪問 FormsModule，而不用直接在自己的 @NgModule 裝飾器中匯入它。

Even though the components declared by SharedModule might not bind with [(ngModel)] and there may be no need for SharedModule to import FormsModule, SharedModule can still export FormsModule without listing it among its imports. This way, you can give other modules access to FormsModule without having to import it directly into the @NgModule decorator.

使用來自其它模組的元件和服務link

Using components vs services from other moduleslink

在使用來自其它模組的元件和來自其它模組的服務時，有一個很重要的區別。 當你要使用指令、管道和元件時，匯入那些模組就可以了。而匯入帶有服務的模組意味著你會擁有那個服務的一個新實例，這通常不會是你想要的結果（你通常會想取到現存的服務）。使用模組匯入來控制服務的實例化。

There is an important distinction between using another module's component and using a service from another module. Import modules when you want to use directives, pipes, and components. Importing a module with services means that you will have a new instance of that service, which typically is not what you need (typically one wants to reuse an existing service). Use module imports to control service instantiation.

獲取共享服務的最常見方式是透過 Angular 的依賴注入系統，而不是模組系統（匯入模組將導致建立新的服務實例，那不是典型的用法）。

The most common way to get a hold of shared services is through Angular dependency injection, rather than through the module system (importing a module will result in a new service instance, which is not a typical usage).

要進一步瞭解共享服務，參閱服務提供者。

To read about sharing services, see Providers.

關於 NgModule 的更多知識link

More on NgModuleslink

你可能還對下列內容感興趣：

You may also be interested in the following:

• 服務提供者。

  Providers.

• 特性模組的分類。

  Types of Feature Modules.