Angular中如何自定義結構型指令和屬性型指令

今天小編給大家分享一下Angular中如何自定義結構型指令和屬性型指令的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一、自定義結構型指令

一個元素上只能放一個結構型指令，結構型指令的書寫形式為*指令名，*是一個語法糖，如下代碼：

<div *ngIf=""></div>
<!-- 等價于 -->
<ng-template [ngIf]="">
  <div></div>
</ng-template>

以下自定義一個結構型指令，當給指令輸入superadmin和admin時，DOM節點顯示，否則移除節點。

@Directive({
  selector: '[appLogin]'
})
export class LoginDirective implements OnInit{
  @Input('appLogin') user=""
  constructor(private VCR: ViewContainerRef,private TPL: TemplateRef<any>) { 
  //在指令的構造函數中將 TemplateRef 和 ViewContainerRef 注入成私有變量。
  }
  ngOnInit(){
    if(this.user=='superadmin'||this.user=="admin"){
      this.VCR.createEmbeddedView(this.TPL)
    }else{
      this.VCR.clear()
    }
  }
}

<div *appLogin="'superadmin'">超級管理員</div>
<div *appLogin="'admin'">管理員</div>
<div *appLogin="'user'">普通會員</div>

效果：

二、自定義屬性型指令

使用屬性型指令，可以更改 DOM 元素和 Angular 組件的外觀或行為。

1、從 @angular/core 導入 ElementRef。ElementRef 的 nativeElement 屬性會提供對宿主 DOM 元素的直接訪問權限。

2、在指令的 constructor() 中添加 ElementRef 以注入對宿主 DOM 元素的引用，該元素就是 appColor 的作用目標。

3、向 ColorDirective 類中添加邏輯，在不同輸入條件下，背景分別展現為紅、綠、藍

@Directive({
  selector: '[appColor]'
})
export class ColorDirective implements OnInit{
  @Input() appColor=""
  constructor(private ele:ElementRef) { 
    
  }
  ngOnInit(){
    if (this.appColor == 'superadmin'){
      this.ele.nativeElement.style.backgroundColor="red"
    } else if (this.appColor == 'admin') {
      this.ele.nativeElement.style.backgroundColor = "green"
    }else{
      this.ele.nativeElement.style.backgroundColor = "blue"
    }
  }
}

<div [appColor]="'superadmin'">超級管理員</div>
<div [appColor]="'admin'">管理員</div>
<div [appColor]="'user'">普通會員</div>**

效果：

以上就是“Angular中如何自定義結構型指令和屬性型指令”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。