Angular2。将数据从指令绑定到模板

Question

可以将指令中的数据绑定到模板，指令在哪里添加？ 例如，我要显示dirText：

[plunker] [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>

柱塞示例