在角度5中使用组件（HTML）中的指令数据

Question

我正在使用名为blue的指令，其中我有一个名为count的变量。我想在HTML中使用这个count变量。我怎样才能做到这一点 ？我想要的东西就像下面......

<div blue >
{{count}}
</div>

Answer 1

这个问题有点难以回答，因为有很多必要的角度知识。

但是，为了给你一些帮助，出版商Springer还有一本关于Angular的好书。它被称为Pro Angular - Second Edition，作家是亚当弗里曼。它涉及很多细节，并解释了指令的所有内容。

我试着在这里给你一个问题，我相信你的看起来像这样：

<div class="blue">
    {{count}}
</div>

您可以在Angular模板中或从Angular模型中填充count变量。 Angular中的模型通常使用TypeScript完成。在其中的某个地方可能是一个名为count的公共变量或一个名为getCount()的方法返回一个字符串。

查看上面提到的书，因为它解释了一切。

Answer 2

在Angular 5中，您可能正在寻找可以定义属性的组件。

<blue>{{count}}</blue>

https://angular.io/guide/quickstart#first-component，第4步，title成分AppComponent。

指令通常用于装饰行为，https://angular.io/api/core/Directive。通常我不认为count属于blue指令

<div blue>{{count}}</div>

Answer 3

为此，您可能需要输出事件。只需在你的指令中添加@Output() count = new EventEmitter<number>();并像这样使用它：

component.html

<div blue (count)="changeCount($event)">
  {{count}}
</div>

component.ts

count: number;
changeCount(event: number) {
  this.count = event;
}

Answer 4

您需要重新审视指令的逻辑。详细信息此链接将帮助您详细了解https://angular.io/guide/attribute-directives

Answer 5

您可以使用LordAlpaca提到的输出事件，或者您可以传入父组件的实例并让属性指令设置父组件的计数值：

模板：

<h1 [blue]="appComponent">
     {{count}}
</h1>

AppComponent

export class AppComponent {
    count : number;
    appComponent = this;
}

指示

export class BlueDirective implements OnInit{
  count : number = 4;
  @Input("blue") component : any;

  ngOnInit(){
    this.component.count = this.count;
  }
}