angular 6 自定義元素指令

Question

如何在 angular 6 中創建元素指令？ 我看到了如何創建屬性指令，但是如果我想創建自定義元素怎么辦？

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

    constructor(el: ElementRef) { 
}
}

Answer 1

我嘗試使用 Selector 創建一個指令，並且它有效。 角是如此強大。

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 中，您可以通過以下方式創建元素指令

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

    constructor(el: ElementRef) { 
    }
}

您只需刪除 selector 中的 [] 括號，以使其成為元素指令。

Answer 3

根據 Angular 文檔，您可以將選擇器聲明為以下方式之一。 所以如果你想用指令創建一個元素，你必須將指令的選擇器聲明為

選擇器：'元素名稱'

• element-name：按元素名稱選擇。 .class：按類名選擇。
• [屬性]：按屬性名稱選擇。 [屬性=值]：選擇依據
• 屬性名稱和值。 :not(sub_selector): 僅當
• 元素與 sub_selector 不匹配。 選擇器1，選擇器2：選擇
• 如果 selector1 或 selector2 匹配。

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