指令复制

因为我们不再直接在需要它的每个组件中定义每个组件和指令,所以我们需要知道Angular模块如何处理指向同一个元素(具有相同的选择器)的指令和组件。 让我们假设一下,我们错误地创建了两个针对同一个属性的指令:

这个例子是在官方文档中找到的代码的变体。

blue-highlight.directive.ts

  1. import { Directive, ElementRef, Renderer } from '@angular/core';
  2. @Directive({
  3. selector: '[appHighlight]'
  4. })
  5. export class BlueHighlightDirective {
  6. constructor(renderer: Renderer, el: ElementRef) {
  7. renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'blue');
  8. renderer.setElementStyle(el.nativeElement, 'color', 'gray');
  9. }
  10. }

yellow-highlight.directive.ts

  1. import { Directive, ElementRef, Renderer } from '@angular/core';
  2. @Directive({
  3. selector: '[appHighlight]'
  4. })
  5. export class YellowHighlightDirective {
  6. constructor(renderer: Renderer, el: ElementRef) {
  7. renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
  8. }
  9. }

这两个指令是相似的,他们试图对一个元素进行风格化。 BlueHighlightDirective将尝试将元素的背景颜色设置为蓝色,同时将文本的颜色更改为灰色,而YellowHighlightDirective将尝试仅将背景颜色更改为黄色。 请注意,两者都定位到具有属性突出显示的任何HTML元素。 如果我们将两个指令添加到同一个模块会发生什么?

app.module.ts

  1. // Imports
  2. @NgModule({
  3. imports: [BrowserModule],
  4. declarations: [
  5. AppComponent,
  6. BlueHighlightDirective,
  7. YellowHighlightDirective
  8. ],
  9. bootstrap: [AppComponent]
  10. })
  11. export class AppModule { }

让我们看看我们如何在模块的唯一组件中使用它。

app.component.ts

  1. import { Component } from "@angular/core";
  2. @Component({
  3. selector: 'rio-app',
  4. template: '<h1 highlight>My Angular 2 App</h1>'
  5. })
  6. export class AppComponent {}

我们可以看到,在我们的组件模板中,我们在h1元素中使用了appHighlight指令,但是哪些风格最终会被应用? 答案是:文本将是灰色的,背景是黄色的。

View Example

我们允许将多个指令用在同一模块中的相同元素上。Angular将按顺序进行每个转换每个指令。

  1. declarations: [
  2. ...,
  3. BlueHighlightDirective,
  4. YellowHighlightDirective
  5. ]

因为我们已经在数组中定义了两个指令,并且数组是有序集合的项,当编译器找到具有appHighlight属性的元素时,它将首先应用BlueHighlightDirective的变换,将文本设置为灰色,将背景设置为蓝色,然后 应用YellowHighlightDirective的变换,再次将背景颜色更改为黄色。 总之,当两个或多个指令定位同一个元素时,它们将按照它们定义的顺序应用