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>

<强> Plunker Example

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

1 个答案: