angular 6 自定义元素指令 | 自定义元素指令

本文介绍了angular 6 自定义元素指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在 angular 6 中创建元素指令?我了解如何创建属性指令，但如果我想创建自定义元素怎么办?

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

推荐答案

我尝试使用 Selector 创建指令，并且它有效.Angular 太强大了.

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

模板:

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

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

这篇关于angular 6 自定义元素指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！