Question

如何在角度6中创建元素指令？我知道如何创建属性指令，但是如果要创建自定义元素怎么办？

@Directive({
  selector: '[appCards]'//you can't do something like -- element: name
})
export class CardsDirective {

    constructor(el: ElementRef) { 
}
}

Answer 1

我尝试使用Selector创建指令，并且该指令有效。 Angular非常强大。

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

@Directive({
  selector: '<appCards>'
})
export class CardsDirective {

    @Input() label;
    constructor(el: ElementRef) { 
      console.log('it called');
    }

    ngOnInit(){
      console.log(this.label);
    }
}

模板：

<appCards label="change"></appCards>

https://stackblitz.com/edit/angular-av5x68

Answer 2

在angular中，您可以按以下方式创建element指令

@Directive({
  selector: 'appCards'
})
export class CardsDirective {

    constructor(el: ElementRef) { 
    }
}

您只需删除选择器中的[]括号即可使其成为元素指令。

Answer 3

根据 Angular 文档，您可以将选择器声明为以下方式之一。所以如果你想创建一个带有指令的元素，你必须将指令的选择器声明为

选择器：'elementName'

element-name：按元素名称选择。 .class：按类名选择。
[attribute]：按属性名称选择。 [属性=值]：选择依据
属性名称和值。 :not(sub_selector): 仅当
元素与 sub_selector 不匹配。选择器1，选择器2：选择
如果 selector1 或 selector2 匹配。

https://angular.io/api/core/Directive#selector

角度6自定义元素指令

3 个答案: