angular 4.0 定义输入属性

转载自 http://www.ngui.cc/news/show-127.html

为了能够让用户自定义 GreetDirective 指令的问候内容，我们需要使用 Input 装饰器去定义指令的输入属性。

指令的作用

该指令用于演示如何利用 Input 装饰器，定义指令的输入属性，从而实现让用户自定义问候内容。

指令的实现

import { Directive, HostBinding, Input } from '@angular/core'; 
@Directive({
    selector: '[greet]' }) export class GreetDirective { 
 @Input() greet: string; 
 @HostBinding() get innerText() { return this.greet;
    }
}

指令的应用

import { Component } from '@angular/core'; 
@Component({
  selector: 'app-root',
  template: `
    <h2>Hello, Angular</h2>
    <h2 [greet]="'Hello, Semlinker!'">Hello, Angular</h2>
  `,
}) 
export class AppComponent { }