angular 6 custom element directives

问题

How can one create an element directive in angular 6? I see how to create an attribute directive, but what if I want to create a custom element?

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

    constructor(el: ElementRef) { 
}
}

回答1:

I tried creating a Directive with Selector as and it works. Angular is so powerful.

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

Template:

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

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

回答2:

In angular, you can create element directive in following way

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

    constructor(el: ElementRef) { 
    }
}

You only have to remove the [] brackets in the selector , in order to make it element directive.

来源：https://stackoverflow.com/questions/52980832/angular-6-custom-element-directives