离子3指令。在Div上添加自定义属性?

时间:2018-06-10 09:31:56

标签: angular ionic-framework binding ionic3 directive

我正在尝试绑定到自定义div属性data-disqus-identifier

<div class="disqus-comment-count" [data-disqus-identifier]="project.route"></div>

我为此目的创建了一个指令

import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[div]',
  exportAs: 'data-disqus-identifier',
})
export class DisqusCountDirective {

  @Input('data-disqus-identifier') identifier: string;

  constructor() { }

}

并且它已在app.module.ts中正确导入但我收到以下错误...

Can't bind to 'data-disqus-identifier' since it isn't a known property of 'div'.

任何帮助表示感谢。

由于

1 个答案:

答案 0 :(得分:0)

您需要在此处使用Attribute Directive。所以你的代码应该是这样的:

在您的HTML中:

<div class="disqus-comment-count" disqusCount [data-disqus-identifier]="project.route"></div>

在你的手稿中(例如disqus-count.directive.ts):

import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[disqusCount]'
})
export class DisqusCountDirective {

  @Input('data-disqus-identifier') identifier: string;

  constructor() { }

}