共享特性模組
Sharing modules
建立共享模組能讓你更好地組織和梳理程式碼。你可以把常用的指令、管道和元件放進一個模組中,然後在應用中其它需要這些的地方匯入該模組。
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:
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
andFormsModule
.
透過重新匯出 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.
使用來自其它模組的元件和服務
Using components vs services from other modules
在使用來自其它模組的元件和來自其它模組的服務時,有一個很重要的區別。 當你要使用指令、管道和元件時,匯入那些模組就可以了。而匯入帶有服務的模組意味著你會擁有那個服務的一個新實例,這通常不會是你想要的結果(你通常會想取到現存的服務)。使用模組匯入來控制服務的實例化。
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 的更多知識
More on NgModules
你可能還對下列內容感興趣:
You may also be interested in the following: