一直不明白什麼時候應用指令。

一個開源專案中的指令應用場景。

頭部右上角有登陸資訊，使用者登陸後和未登入的情況，menu列表不同。

    <!-- Show this for logged out users -->
    <ul *appShowAuthed="false"
      class="nav navbar-nav pull-xs-right">

      <li class="nav-item">
        <a class="nav-link"
          routerLink="/">
          Home
        
 
</a>
      </li>

      <li class="nav-item">
        <a class="nav-link"
          routerLink="/login"
          routerLinkActive="active">
          Sign in
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link"
          routerLink
 
="/register"
          routerLinkActive="active">
          Sign up
        </a>
      </li>

    </ul>

    <!-- Show this for logged in users -->
    <ul *appShowAuthed="true"
      class="nav navbar-nav pull-xs-right">

      <li class="nav-item">
        <a 
 
class="nav-link"
          routerLink="/"
          routerLinkActive="active"
          [routerLinkActiveOptions]="{ exact: true }">
          Home
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link"
          routerLink="/editor"
          routerLinkActive="active">
          <i class="ion-compose"></i>&nbsp;New Article
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link"
          routerLink="/settings"
          routerLinkActive="active">
          <i class="ion-gear-a"></i>&nbsp;Settings
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link"
          [routerLink]="['/profile', currentUser.username]"
          routerLinkActive="active">
          <img [src]="currentUser.image" *ngIf="currentUser.image" class="user-pic" />
          {{ currentUser.username }}
        </a>
      </li>

    </ul>

指令程式碼如下

import {
  Directive,
  Input,
  OnInit,
  TemplateRef,
  ViewContainerRef
} from '@angular/core';

import { UserService } from '../core';

@Directive({ selector: '[appShowAuthed]' })
export class ShowAuthedDirective implements OnInit {
  constructor(
    private templateRef: TemplateRef<any>,
    private userService: UserService,
    private viewContainer: ViewContainerRef
  ) {}

  condition: boolean;

  ngOnInit() {
    this.userService.isAuthenticated.subscribe(
      (isAuthenticated) => {
        if (isAuthenticated && this.condition || !isAuthenticated && !this.condition) {
          this.viewContainer.createEmbeddedView(this.templateRef);
        } else {
          this.viewContainer.clear();
        }
      }
    );
  }

  @Input() set appShowAuthed(condition: boolean) {
    this.condition = condition;
  }

}

angular-realworld-example