自訂結構型指令 Structural Directive

可以使用user Name來定義使用權限，顯示使用者可視或不可視區域

src/app/app.component.css

@@ -1,3 +1,10 @@
 p {
   font-family: Lato;
 }
+
+.item {
+  margin: 20px;
+  padding: 10px;
+  text-align: text;
+  border: solid 1px #aaa;
+}

src/app/app.component.html

@@ -1,3 +1,6 @@
-<button appButtonConfirm="是否確認?"
-(confirm)="onConfirm()">
-按鈕</button>
+<ng-container [appLimit]="userLimit">
+  <span>目前的權限：{{ userLimit }}</span>
+  <div class="item" *appLimitCase="'user'">這個區塊只有使用者看得到</div>
+  <div class="item" *appLimitCase="'admin'">這個區塊只有管理員看得到</div>
+  <div class="item">這個區塊全部使用者都看得到</div>
+</ng-container>

src/app/app.component.ts

@@ -7,8 +7,6 @@ import { Component, ViewChild, OnInit } from '@angular/core';
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-onConfirm():void{
-  alert('確定');
-}
+  userLimit = 'user';
 
 }

src/app/app.module.ts

@@ -3,11 +3,13 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
-import { ButtonConfirmDirective } from './button-confirm.directive';
+import { LimitDirective } from './limit.directive';
+import { LimitCaseDirective } from './limit-case.directive';
+
 
 @NgModule({
   imports:      [ BrowserModule, FormsModule ],
-  declarations: [ AppComponent, ButtonConfirmDirective ],
+  declarations: [ AppComponent, LimitDirective, LimitCaseDirective ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

src/app/button-confirm.directive.ts

@@ -1,19 +0,0 @@
-import { outputAst } from '@angular/compiler';
-import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
-
-@Directive({
-  selector: 'button[appButtonConfirm]'
-})
-export class ButtonConfirmDirective {
-@Input('appButtonConfirm') message!:string;
-@Output() confirm= new EventEmitter<void>();
-
-@HostListener('click', ['$event'])
-clickEvent(event:Event){
-  event.preventDefault();
-  event.stopPropagation();
-  if(confirm(this.message)){
-    this.confirm.emit();
-  }
-}
-}

src/app/limit-case.directive.ts

@@ -0,0 +1,27 @@
+import { Directive, Host, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+import { LimitDirective } from './limit.directive';
+
+@Directive({
+  selector: '[appLimitCase]'
+})
+export class LimitCaseDirective {
+
+  constructor(    private viewContainer: ViewContainerRef,
+    private templateRef: TemplateRef<Object>,
+    @Host() private limit: LimitDirective) {}
+  private hasView=false;
+  @Input()
+  set appLimitCase(value:string){
+    const condition = value ===this.limit.appLimit;
+    if(condition&&!this.hasView){
+      this.viewContainer.createEmbeddedView(
+        this.templateRef
+      );
+      this.hasView=true;
+    }else if(!condition && this.hasView)
+    {
+      this.viewContainer.clear();
+      this.hasView=false;
+    }
+  }
+}

src/app/limit.directive.ts

@@ -0,0 +1,9 @@
+import { Directive, Input } from '@angular/core';
+
+@Directive({
+  selector: '[appLimit]'
+})
+export class LimitDirective {
+  @Input() appLimit!:string;
+
+}