属性型指令

Attribute directives

属性型指令用于改变一个 DOM 元素的外观或行为。

An Attribute directive changes the appearance or behavior of a DOM element.

你可以到这里试试：属性型指令范例 / 下载范例。

Try theAttribute Directive example / 下载范例.

指令概览

Directives overview

在 Angular 中有三种类型的指令：

There are three kinds of directives in Angular:

组件 — 拥有模板的指令
Components—directives with a template.
结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令
Structural directives—change the DOM layout by adding and removing DOM elements.
属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。
Attribute directives—change the appearance or behavior of an element, component, or another directive.

组件是这三种指令中最常用的。你在快速上手例子中第一次见到组件。

Components are the most common of the three directives. You saw a component for the first time in the Getting Started tutorial.

结构型指令修改视图的结构。例如，NgFor 和 NgIf。要了解更多，参见结构型指令指南。

Structural Directives change the structure of the view. Two examples are NgFor and NgIf. Learn about them in the Structural Directives guide.

属性型指令改变一个元素的外观或行为。例如，内置的 NgStyle 指令可以同时修改元素的多个样式。

Attribute directives are used as attributes of elements. The built-in NgStyle directive in the Template Syntax guide, for example, can change several element styles at the same time.

创建一个简单的属性型指令

Build a simple attribute directive

属性型指令至少需要一个带有 @Directive 装饰器的控制器类。该装饰器指定了一个用于标识属性的选择器。控制器类实现了指令需要的指令行为。

An attribute directive minimally requires building a controller class annotated with @Directive, which specifies the selector that identifies the attribute. The controller class implements the desired directive behavior.

本章展示了如何创建一个简单的属性型指令 appHighlight ，当用户把鼠标悬停在一个元素上时，改变它的背景色。你可以这样用它：

This page demonstrates building a simple appHighlight attribute directive to set an element's background color when the user hovers over that element. You can apply it like this:

src/app/app.component.html (applied)

      
      <p appHighlight>Highlight me!</p>

注意，指令不支持命名空间。

Please note that directives do not support namespaces.

src/app/app.component.avoid.html (unsupported)

      
      <p app:Highlight>This is invalid</p>

编写指令代码

Write the directive code

在命令行窗口下用 CLI 命令 ng generate directive创建指令类文件。

Create the directive class file in a terminal window with the CLI command ng generate directive.

      
      ng generate directive highlight

CLI 会创建 src/app/highlight.directive.ts 及相应的测试文件（src/app/highlight.directive.spec.ts），并且在根模块 AppModule 中声明这个指令类。

The CLI creates src/app/highlight.directive.ts, a corresponding test file src/app/highlight.directive.spec.ts, and declares the directive class in the root AppModule.

和组件一样，这些指令也必须在Angular 模块中进行声明。

Directives must be declared in Angular Modules in the same manner as components.

生成的 src/app/highlight.directive.ts 文件如下：

The generated src/app/highlight.directive.ts is as follows:

src/app/highlight.directive.ts

      
      import { Directive } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor() { }
}

这里导入的 Directive 符号提供了 Angular 的 @Directive 装饰器。

The imported Directive symbol provides Angular the @Directive decorator.

@Directive 装饰器的配置属性中指定了该指令的 CSS 属性型选择器 [appHighlight]

The @Directive decorator's lone configuration property specifies the directive's CSS attribute selector, [appHighlight].

这里的方括号([])表示它的属性型选择器。 Angular 会在模板中定位每个拥有名叫 appHighlight 属性的元素，并且为这些元素加上本指令的逻辑。

It's the brackets ([]) that make it an attribute selector. Angular locates each element in the template that has an attribute named appHighlight and applies the logic of this directive to that element.

正因如此，这类指令被称为 属性选择器 。

The attribute selector pattern explains the name of this kind of directive.

为什么不直接叫做 "highlight"？

Why not "highlight"?

尽管 highlight 是一个比 appHighlight 更简洁的名字，而且它确实也能工作。但是最佳实践是在选择器名字前面添加前缀，以确保它们不会与标准 HTML 属性冲突。它同时减少了与第三方指令名字发生冲突的危险。

Though highlight would be a more concise selector than appHighlight and it would work, the best practice is to prefix selector names to ensure they don't conflict with standard HTML attributes. This also reduces the risk of colliding with third-party directive names. The CLI added the app prefix for you.

确认你没有给 highlight 指令添加ng前缀。那个前缀属于 Angular，使用它可能导致难以诊断的 bug。例如，这个简短的前缀 app 可以帮助你区分自定义指令。

Make sure you do not prefix the highlight directive name with ngbecause that prefix is reserved for Angular and using it could cause bugs that are difficult to diagnose.

紧跟在 @Directive 元数据之后的就是该指令的控制器类，名叫 HighlightDirective，它包含了该指令的逻辑（目前为空逻辑）。然后导出 HighlightDirective，以便它能在别处访问到。

After the @Directive metadata comes the directive's controller class, called HighlightDirective, which contains the (currently empty) logic for the directive. Exporting HighlightDirective makes the directive accessible.

现在，把刚才生成的 src/app/highlight.directive.ts 编辑成这样：

Now edit the generated src/app/highlight.directive.ts to look as follows:

src/app/highlight.directive.ts

      
      import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

import 语句还从 Angular 的 core 库中导入了一个 ElementRef 符号。

The import statement specifies an additional ElementRef symbol from the Angular core library:

你可以在指令的构造函数中使用 ElementRef 来注入宿主 DOM 元素的引用，也就是你放置 appHighlight 的那个元素。

You use the ElementRef in the directive's constructor to inject a reference to the host DOM element, the element to which you applied appHighlight.

ElementRef 通过其 nativeElement 属性给你了直接访问宿主 DOM 元素的能力。

ElementRef grants direct access to the host DOM element through its nativeElement property.

这里的第一个实现把宿主元素的背景色设置为了黄色。

This first implementation sets the background color of the host element to yellow.

使用属性型指令

Apply the attribute directive

要想使用这个新的 HighlightDirective，就往根组件 AppComponent 的模板中添加一个 <p> 元素，并把该指令作为一个属性使用。

To use the new HighlightDirective, add a paragraph (<p>) element to the template of the root AppComponent and apply the directive as an attribute.

src/app/app.component.html

      
      <p appHighlight>Highlight me!</p>

运行这个应用以查看 HighlightDirective 的实际效果。

Now run the application to see the HighlightDirective in action.

      
      ng serve

总结：Angular 在宿主元素 <p> 上发现了一个 appHighlight 属性。然后它创建了一个 HighlightDirective 类的实例，并把所在元素的引用注入到了指令的构造函数中。在构造函数中，该指令把 <p> 元素的背景设置为了黄色。

To summarize, Angular found the appHighlight attribute on the host <p> element. It created an instance of the HighlightDirective class and injected a reference to the <p> element into the directive's constructor which sets the <p> element's background style to yellow.

响应用户引发的事件

Respond to user-initiated events

当前，appHighlight 只是简单的设置元素的颜色。这个指令应该在用户鼠标悬浮一个元素时，设置它的颜色。

Currently, appHighlight simply sets an element color. The directive could be more dynamic. It could detect when the user mouses into or out of the element and respond by setting or clearing the highlight color.

先把 HostListener 加进导入列表中。

Begin by adding HostListener to the list of imported symbols.

src/app/highlight.directive.ts (imports)

      
      import { Directive, ElementRef, HostListener } from '@angular/core';

然后使用 HostListener 装饰器添加两个事件处理器，它们会在鼠标进入或离开时进行响应。

Then add two event handlers that respond when the mouse enters or leaves, each adorned by the HostListener decorator.

src/app/highlight.directive.ts (mouse-methods)

      
      @HostListener('mouseenter') onMouseEnter() {
  this.highlight('yellow');
}

@HostListener('mouseleave') onMouseLeave() {
  this.highlight(null);
}

private highlight(color: string) {
  this.el.nativeElement.style.backgroundColor = color;
}

@HostListener 装饰器让你订阅某个属性型指令所在的宿主 DOM 元素的事件，在这个例子中就是 <p>。

The @HostListener decorator lets you subscribe to events of the DOM element that hosts an attribute directive, the <p> in this case.

当然，你可以通过标准的 JavaScript 方式手动给宿主 DOM 元素附加一个事件监听器。但这种方法至少有三个问题：

Of course you could reach into the DOM with standard JavaScript and attach event listeners manually. There are at least three problems with that approach:

必须正确的书写事件监听器。
You have to write the listeners correctly.
当指令被销毁的时候，必须拆卸事件监听器，否则会导致内存泄露。
The code must detach the listener when the directive is destroyed to avoid memory leaks.
必须直接和 DOM API 打交道，应该避免这样做。
Talking to DOM API directly isn't a best practice.

这些处理器委托了一个辅助方法来为 DOM 元素（el）设置颜色。

The handlers delegate to a helper method that sets the color on the host DOM element, el.

这个辅助方法（highlight）被从构造函数中提取了出来。修改后的构造函数只负责声明要注入的元素 el: ElementRef。

The helper method, highlight, was extracted from the constructor. The revised constructor simply declares the injected el: ElementRef.

src/app/highlight.directive.ts (constructor)

      
      constructor(private el: ElementRef) { }

下面是修改后的指令代码：

Here's the updated directive in full:

src/app/highlight.directive.ts

      
      import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) { }

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

运行本应用并确认：当把鼠标移到 p 上的时候，背景色就出现了，而移开时就消失了。

Run the app and confirm that the background color appears when the pointer hovers over the paragraph element and disappears as the pointer moves out.

使用 `@Input` 数据绑定向指令传递值

Pass values into the directive with an @Input data binding

高亮的颜色目前是硬编码在指令中的，这不够灵活。在这一节中，你应该让指令的使用者可以指定要用哪种颜色进行高亮。

Currently the highlight color is hard-coded within the directive. That's inflexible. In this section, you give the developer the power to set the highlight color while applying the directive.

先从 @angular/core 中导入 Input。

Begin by adding Input to the list of symbols imported from @angular/core.

src/app/highlight.directive.ts (imports)

      
      import { Directive, ElementRef, HostListener, Input } from '@angular/core';

然后把 highlightColor 属性添加到指令类中，就像这样：

Add a highlightColor property to the directive class like this:

src/app/highlight.directive.ts (highlightColor)

      
      @Input() highlightColor: string;

绑定到 @Input 属性

Binding to an @Input property

注意看 @Input 装饰器。它往类上添加了一些元数据，从而让该指令的 highlightColor 能用于绑定。

Notice the @Input decorator. It adds metadata to the class that makes the directive's highlightColor property available for binding.

它之所以称为输入属性，是因为数据流是从绑定表达式流向指令内部的。如果没有这个元数据，Angular 就会拒绝绑定，参见稍后了解更多。

It's called an input property because data flows from the binding expression into the directive. Without that input metadata, Angular rejects the binding; see below for more about that.

试试把下列指令绑定变量添加到 AppComponent 的模板中：

Try it by adding the following directive binding variations to the AppComponent template:

src/app/app.component.html (excerpt)

      
      <p appHighlight highlightColor="yellow">Highlighted in yellow</p>
<p appHighlight [highlightColor]="'orange'">Highlighted in orange</p>

把 color 属性添加到 AppComponent 中：

Add a color property to the AppComponent.

src/app/app.component.ts (class)

      
      export class AppComponent {
  color = 'yellow';
}

让它通过属性绑定来控制高亮颜色。

Let it control the highlight color with a property binding.

src/app/app.component.html (excerpt)

      
      <p appHighlight [highlightColor]="color">Highlighted with parent component's color</p>

很不错，但如果可以在应用该指令时在同一个属性中设置颜色就更好了，就像这样：

That's good, but it would be nice to simultaneously apply the directive and set the color in the same attribute like this.

src/app/app.component.html (color)

      
      <p [appHighlight]="color">Highlight me!</p>

[appHighlight] 属性同时做了两件事：把这个高亮指令应用到了 <p> 元素上，并且通过属性绑定设置了该指令的高亮颜色。你复用了该指令的属性选择器 [appHighlight] 来同时完成它们。这是清爽、简约的语法。

The [appHighlight] attribute binding both applies the highlighting directive to the <p> element and sets the directive's highlight color with a property binding. You're re-using the directive's attribute selector ([appHighlight]) to do both jobs. That's a crisp, compact syntax.

你还要把该指令的 highlightColor 改名为 appHighlight，因为它是颜色属性目前的绑定名。

You'll have to rename the directive's highlightColor property to appHighlight because that's now the color property binding name.

src/app/highlight.directive.ts (renamed to match directive selector)

      
      @Input() appHighlight: string;

这可不好。因为 appHighlight 是一个糟糕的属性名，而且不能反映该属性的意图。

This is disagreeable. The word, appHighlight, is a terrible property name and it doesn't convey the property's intent.

绑定到 @Input 别名

Bind to an @Input alias

幸运的是，你可以随意命名该指令的属性，并且给它指定一个用于绑定的别名。

Fortunately you can name the directive property whatever you want and alias it for binding purposes.

恢复原始属性名，并在 @Input 的参数中把该选择器指定为别名。

Restore the original property name and specify the selector as the alias in the argument to @Input.

src/app/highlight.directive.ts (color property with alias)

      
      @Input('appHighlight') highlightColor: string;

在指令内部，该属性叫 highlightColor，在外部，你绑定到它地方，它叫 appHighlight。

Inside the directive the property is known as highlightColor. Outside the directive, where you bind to it, it's known as appHighlight.

这是最好的结果：理想的内部属性名，理想的绑定语法：

You get the best of both worlds: the property name you want and the binding syntax you want:

src/app/app.component.html (color)

      
      <p [appHighlight]="color">Highlight me!</p>

现在，你通过别名绑定到了 highlightColor 属性，并修改 onMouseEnter() 方法来使用它。如果有人忘了绑定到 appHighlight，那就用红色进行高亮。

Now that you're binding via the alias to the highlightColor, modify the onMouseEnter() method to use that property. If someone neglects to bind to appHighlight, highlight the host element in red:

src/app/highlight.directive.ts (mouse enter)

      
      @HostListener('mouseenter') onMouseEnter() {
  this.highlight(this.highlightColor || 'red');
}

这是最终版本的指令类。

Here's the latest version of the directive class.

src/app/highlight.directive.ts (excerpt)

      
      import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input('appHighlight') highlightColor: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'red');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

写个测试程序试验下

Write a harness to try it

凭空想象该指令如何工作可不容易。在本节，你将把 AppComponent 改成一个测试程序，它让你可以通过单选按钮来选取高亮颜色，并且把你选取的颜色绑定到指令中。

It may be difficult to imagine how this directive actually works. In this section, you'll turn AppComponent into a harness that lets you pick the highlight color with a radio button and bind your color choice to the directive.

把 app.component.html 修改成这样：

Update app.component.html as follows:

src/app/app.component.html (v2)

      
      <h1>My First Attribute Directive</h1>

<h4>Pick a highlight color</h4>
<div>
  <input type="radio" name="colors" (click)="color='lightgreen'">Green
  <input type="radio" name="colors" (click)="color='yellow'">Yellow
  <input type="radio" name="colors" (click)="color='cyan'">Cyan
</div>
<p [appHighlight]="color">Highlight me!</p>

修改 AppComponent.color，让它不再有初始值。

Revise the AppComponent.color so that it has no initial value.

src/app/app.component.ts (class)

      
      export class AppComponent {
  color: string;
}

下面是测试程序和指令的动图。

Here are the harness and directive in action.

绑定到第二个属性

Bind to a second property

本例的指令只有一个可定制属性，真实的应用通常需要更多。

This highlight directive has a single customizable property. In a real app, it may need more.

目前，默认颜色（它在用户选取了高亮颜色之前一直有效）被硬编码为红色。应该允许模板的开发者设置默认颜色。

At the moment, the default color—the color that prevails until the user picks a highlight color—is hard-coded as "red". Let the template developer set the default color.

把第二个名叫 defaultColor 的输入属性添加到 HighlightDirective 中：

Add a second input property to HighlightDirective called defaultColor:

src/app/highlight.directive.ts (defaultColor)

      
      @Input() defaultColor: string;

修改该指令的 onMouseEnter，让它首先尝试使用 highlightColor 进行高亮，然后用 defaultColor，如果它们都没有指定，那就用红色作为后备。

Revise the directive's onMouseEnter so that it first tries to highlight with the highlightColor, then with the defaultColor, and falls back to "red" if both properties are undefined.

src/app/highlight.directive.ts (mouse-enter)

      
      @HostListener('mouseenter') onMouseEnter() {
  this.highlight(this.highlightColor || this.defaultColor || 'red');
}

当已经绑定过 appHighlight 属性时，要如何绑定到第二个属性呢？

How do you bind to a second property when you're already binding to the appHighlight attribute name?

像组件一样，你也可以绑定到指令的很多属性，只要把它们依次写在模板中就行了。开发者可以绑定到 AppComponent.color，并且用紫罗兰色作为默认颜色，代码如下：

As with components, you can add as many directive property bindings as you need by stringing them along in the template. The developer should be able to write the following template HTML to both bind to the AppComponent.color and fall back to "violet" as the default color.

src/app/app.component.html (defaultColor)

      
      <p [appHighlight]="color" defaultColor="violet">
  Highlight me too!
</p>

Angular 之所以知道 defaultColor 绑定属于 HighlightDirective，是因为你已经通过 @Input 装饰器把它设置成了公共属性。

Angular knows that the defaultColor binding belongs to the HighlightDirective because you made it public with the @Input decorator.

当这些代码完成时，测试程序工作时的动图如下：

Here's how the harness should work when you're done coding.

小结

Summary

本章介绍了如何：

This page covered how to:

构建一个属性型指令，它用于修改一个元素的行为。
Build an attribute directive that modifies the behavior of an element.
把一个指令应用到模板中的某个元素上。
Apply the directive to an element in a template.
响应事件以改变指令的行为。
Respond to events that change the directive's behavior.
把值绑定到指令中。
Bind values to the directive.

最终的源码如下：

The final source code follows:

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { color: string; }

<h1>My First Attribute Directive</h1> <h4>Pick a highlight color</h4> <div> <input type="radio" name="colors" (click)="color='lightgreen'">Green <input type="radio" name="colors" (click)="color='yellow'">Yellow <input type="radio" name="colors" (click)="color='cyan'">Cyan </div> <p [appHighlight]="color">Highlight me!</p> <p [appHighlight]="color" defaultColor="violet"> Highlight me too! </p>

/* tslint:disable:member-ordering */ import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(private el: ElementRef) { } @Input() defaultColor: string; @Input('appHighlight') highlightColor: string; @HostListener('mouseenter') onMouseEnter() { this.highlight(this.highlightColor || this.defaultColor || 'red'); } @HostListener('mouseleave') onMouseLeave() { this.highlight(null); } private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } }

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { HighlightDirective } from './highlight.directive'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent, HighlightDirective ], bootstrap: [ AppComponent ] }) export class AppModule { }

import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule);

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Attribute Directives</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <app-root></app-root> </body> </html>

app/app.component.ts

app/app.component.html

app/highlight.directive.ts

app/app.module.ts

main.ts

index.html

      
      import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  color: string;
}

你还可以体验和下载属性型指令范例 / 下载范例.

You can also experience and download theAttribute Directive example / 下载范例.

附录：为什么要加@Input？

Appendix: Why add @Input?

在这个例子中 hightlightColor 是 HighlightDirective 的一个输入型属性。你见过它没有用别名时的代码：

In this demo, the highlightColor property is an input property of the HighlightDirective. You've seen it applied without an alias:

src/app/highlight.directive.ts (color)

      
      @Input() highlightColor: string;

也见过用别名时的代码：

You've seen it with an alias:

src/app/highlight.directive.ts (color)

      
      @Input('appHighlight') highlightColor: string;

无论哪种方式，@Input 装饰器都告诉 Angular，该属性是公共的，并且能被父组件绑定。如果没有 @Input，Angular 就会拒绝绑定到该属性。

Either way, the @Input decorator tells Angular that this property is public and available for binding by a parent component. Without @Input, Angular refuses to bind to the property.

但你以前也曾经把模板 HTML 绑定到组件的属性，而且从来没有用过 @Input。差异何在？

You've bound template HTML to component properties before and never used @Input. What's different?

差异在于信任度不同。 Angular 把组件的模板看做从属于该组件的。组件和它的模板默认会相互信任。这也就是意味着，组件自己的模板可以绑定到组件的任意属性，无论是否使用了 @Input 装饰器。

The difference is a matter of trust. Angular treats a component's template as belonging to the component. The component and its template trust each other implicitly. Therefore, the component's own template may bind to any property of that component, with or without the @Input decorator.

但组件或指令不应该盲目的信任其它组件或指令。因此组件或指令的属性默认是不能被绑定的。从 Angular 绑定机制的角度来看，它们是私有的，而当添加了 @Input 时，Angular 绑定机制才会把它们当成公共的。只有这样，它们才能被其它组件或属性绑定。

But a component or directive shouldn't blindly trust other components and directives. The properties of a component or directive are hidden from binding by default. They are private from an Angular binding perspective. When adorned with the @Input decorator, the property becomes public from an Angular binding perspective. Only then can it be bound by some other component or directive.

你可以根据属性名在绑定中出现的位置来判定是否要加 @Input。

You can tell if @Input is needed by the position of the property name in a binding.

当它出现在等号右侧的模板表达式中时，它属于模板所在的组件，不需要 @Input 装饰器。
When it appears in the template expression to the right of the equals (=), it belongs to the template's component and does not require the @Input decorator.
当它出现在等号左边的方括号（[ ]）中时，该属性属于其它组件或指令，它必须带有 @Input 装饰器。
When it appears in square brackets ([ ]) to the left of the equals (=), the property belongs to some other component or directive; that property must be adorned with the @Input decorator.

试用此原理分析下列范例：

Now apply that reasoning to the following example:

src/app/app.component.html (color)

      
      <p [appHighlight]="color">Highlight me!</p>

color 属性位于右侧的绑定表达式中，它属于模板所在的组件。该模板和组件相互信任。因此 color 不需要 @Input 装饰器。
The color property in the expression on the right belongs to the template's component. The template and its component trust each other. The color property doesn't require the @Input decorator.
appHighlight 属性位于左侧，它引用了 HighlightDirective 中一个带别名的属性，它不是模板所属组件的一部分，因此存在信任问题。所以，该属性必须带 @Input 装饰器。
The appHighlight property on the left refers to an aliased property of the HighlightDirective, not a property of the template's component. There are trust issues. Therefore, the directive property must carry the @Input decorator.

属性型指令link

Attribute directiveslink

指令概览link

Directives overviewlink

创建一个简单的属性型指令link

Build a simple attribute directivelink

编写指令代码link

Write the directive codelink

为什么不直接叫做 "highlight"？link

Why not "highlight"?link

使用属性型指令link

Apply the attribute directivelink

响应用户引发的事件link

Respond to user-initiated eventslink

使用 @Input 数据绑定向指令传递值link

Pass values into the directive with an @Input data bindinglink

绑定到 @Input 属性link

Binding to an @Input propertylink

绑定到 @Input 别名link

Bind to an @Input aliaslink

写个测试程序试验下link

Write a harness to try itlink

绑定到第二个属性link

Bind to a second propertylink

小结link

Summarylink

附录：为什么要加@Input？link

Appendix: Why add @Input?link

属性型指令

Attribute directives

指令概览

Directives overview

创建一个简单的属性型指令

Build a simple attribute directive

编写指令代码

Write the directive code

为什么不直接叫做 "highlight"？

Why not "highlight"?

使用属性型指令

Apply the attribute directive

响应用户引发的事件

Respond to user-initiated events

使用 `@Input` 数据绑定向指令传递值

Pass values into the directive with an @Input data binding

绑定到 @Input 属性

Binding to an @Input property

绑定到 @Input 别名

Bind to an @Input alias

写个测试程序试验下

Write a harness to try it

绑定到第二个属性

Bind to a second property

小结

Summary

附录：为什么要加@Input？

Appendix: Why add @Input?