因为我们不再直接在需要它的每个组件中定义每个组件和指令，所以我们需要知道Angular模块如何处理指向同一个元素（具有相同的选择器）的指令和组件。
让我们假设一下，我们错误地创建了两个针对同一个属性的指令：
这个例子是在官方文档中找到的代码的变体。
blue-highlight.directive.ts
import { Directive, ElementRef, Renderer } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class BlueHighlightDirective {
constructor(renderer: Renderer, el: ElementRef) {
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'blue');
renderer.setElementStyle(el.nativeElement, 'color', 'gray');
}
}
yellow-highlight.directive.ts
import { Directive, ElementRef, Renderer } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class YellowHighlightDirective {
constructor(renderer: Renderer, el: ElementRef) {
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
}
}
这两个指令是相似的，他们试图对一个元素进行风格化。 BlueHighlightDirective将尝试将元素的背景颜色设置为蓝色，同时将文本的颜色更改为灰色，而YellowHighlightDirective将尝试仅将背景颜色更改为黄色。 请注意，两者都定位到具有属性突出显示的任何HTML元素。 如果我们将两个指令添加到同一个模块会发生什么？
app.module.ts
// Imports
@NgModule({
imports: [BrowserModule],
declarations: [
AppComponent,
BlueHighlightDirective,
YellowHighlightDirective
],
bootstrap: [AppComponent]
})
export class AppModule { }
让我们看看我们如何在模块的唯一组件中使用它。
app.component.ts
import { Component } from "@angular/core";
@Component({
selector: 'rio-app',
template: '<h1 highlight>My Angular 2 App</h1>'
})
export class AppComponent {}
我们可以看到，在我们的组件模板中，我们在h1元素中使用了appHighlight指令，但是哪些风格最终会被应用？ 答案是：文本将是灰色的，背景是黄色的。
我们允许将多个指令用在同一模块中的相同元素上。Angular将按顺序 进行每个转换每个指令。
declarations: [
...,
BlueHighlightDirective,
YellowHighlightDirective
]
因为我们已经在数组中定义了两个指令，并且数组是有序集合的项 ，当编译器找到具有appHighlight属性的元素时，它将首先应用BlueHighlightDirective的变换，将文本设置为灰色，将背景设置为蓝色，然后 应用YellowHighlightDirective的变换，再次将背景颜色更改为黄色。总之，当两个或多个指令定位同一个元素时，它们将按照它们定义的顺序应用 。
下一节：使用模块将我们的应用的相关功能分组的另一个优点是能够按需加载那些片段。 延迟加载模块有助于减少启动时间。 通过延迟加载，我们的应用程序不需要立即加载所有内容，它只需要加载用户期望第一次加载时看到的内容。 延迟加载的模块只会在用户导航到其路由时加载。