在 Angular 5 中使用组件 (HTML) 中的指令数据答案

【问题标题】：Use directive data in component (HTML) in angular 5在 Angular 5 中使用组件 (HTML) 中的指令数据
【发布时间】：2018-08-14 07:07:33
【问题描述】：

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

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

【问题讨论】：

标签： angular angular5 angular2-directives

【解决方案1】：

这个问题有点难回答，因为需要大量的 Angular 知识。

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

我尝试在这里回答您的问题，我相信您的问题可能如下所示：

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

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

模板：

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

应用组件

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;
  }
}

【讨论】：

【解决方案6】：

您可以使用模板变量来实现这一点。在你的指令中：

@Directive({
    selector: '[appBlue]',
    exportAs: 'blueDirective'
})
export class BlueDirective {
    public count: number;
    // your logic here...
}

实现如下：

<div appBlue #blue="blueDirective">
    {{ blue.count }}
</div>

希望对你有帮助

【讨论】：