Angular 2. 将数据从指令绑定到模板

Question

可以将数据从指令绑定到模板，指令添加到哪里？例如我想显示 dirText:

[笨蛋][1]

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div my-dir>Text from dir: {{dirText}}</div>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Its component text`
  }
}

@Directive({
  selector: '[my-dir]'
})

export class MyDir{
  dirText: string;
  constructor(){
    this.dirText = 'Text from Dir';
  }
}

Answer 1

您可以使用 exportAs 属性。它是在模板中导出组件实例的名称

my.directive.ts

@Directive({
  selector: '[my-dir]',
  exportAs: 'myDir'
})
export class MyDir {
  ...

parent.html

<div my-dir #x="myDir">Text from dir: {{x.dirText}}</div>

Plunker Example

Angular 2. 将数据从指令绑定到模板

Angular 2. Bind data from directive to template

angular2-directives

angular