Question

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

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

Answer 1

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

但是，为了给你一些帮助，出版商斯普林格出版了一本关于Angular的好书。它被称为<div class="blue"> {{count}} </div>，作者是亚当弗里曼。它涉及很多细节，并且还解释了指令的所有内容。

我试着在这里向你提出你的问题，我相信你的看法可能是这样的：

count

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

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

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

Answer 6

您可以使用模板var实现此目的。在您的指令中：

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

实现看起来像这样：

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

我希望它可以帮助

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

6 个答案: