Angular #31 - 深入 Routing [4]

Secondary Routes

• 又稱 Auxillary routes

  • 主要的應用程式在運作的同時，又可以開啟一個小 route，作不同的事情，在桌面應用程式或網頁都很常見
  • 一個很常見的例子就是 Gmail，在你瀏覽信件的同時，又可以開一個小視窗撰寫新的 email
  • 其它的範例像是 Facebook 的聊天視窗、Help 文件 ... 等
  • 它們的行為就像是一個新的 root level route

• 講那麼多，該怎麼使用 Secondary Routes? 假設情境是要跟別的 User 聊天

  • 首先，加入以下的程式片段到 app.module.ts

      const appRoutes: Routes = [
          { path: 'login', component: LoginComponent },
          { path: 'users', component: ChatListComponent, outlet: 'chat', },
          { path: 'users/:username', component: ChatComponent, outlet: 'chat', },
          { path: '', redirectTo: '/forums', pathMatch: 'full' },
          { path: '**', component: NotFoundComponent },
      ];

    • 仔細一看，事情不單純，多了一個 outlet 屬性
    • 此外，Secondary Route 也可以有 params 可以用
    • 最後，新增的那兩個 rule 是放在 '' 與 ** 之前，因為那兩個比較是屬於 fallback 作用的 route

  • 接著要調整一下 app.component.html

      <router-outlet name="chat"></router-outlet>

    • 發現了嗎？這裡的 chat 跟 AppModule 中定義的 outlet 是吻合的，意思是這個 <router-outlet> 是特別給 ChatComponent 使用的

  • 還記得右上角有一個聊天的 icon 嗎？ 現在要設定按了它之後會觸發 Angular Routing 的機制

      <a class="nav-link nav-icon" 
         [routerLink]="[{outlets: { chat: ['users']}}]">
         <clr-icon shape="talk-bubbles"></clr-icon>
      </a>

    • 這兒透過綁定的方式設定 routerLink，但後面跟的東西好像有點複雜，但這是必須的，因為是 Secondary route
    • 後面那個陣列裡面有一個物件，物件的屬性是 outlet，指的是要在哪一個 <router-outlet> 渲染，而其值又是一個物件，指定要到 chat 這個 <router-outlet> 渲染 users 這個 path 對應到的 Component

  • 因為 users 是對應該到 ChatListComponent， 所以接著要調整它的 template

      <div class="card">
        <div class="card-header">
          Select user to chat with
          <button aria-label="Close" class="close" type="button" (click)="close()">
            <clr-icon aria-hidden="true" shape="close"></clr-icon>
          </button>
        </div>
        <div class="card-block">
          <div class="card-text">
            <clr-tree-node *ngFor="let user of users" (click)="talkTo = user"><span [class.active]="talkTo == user" class="clr-treenode-link">{{user}}</span></clr-tree-node>
          </div>
        </div>
        <div class="card-footer">
          <a class="btn btn-sm btn-link btn-primary" *ngIf="talkTo" [routerLink]="[talkTo]">Start Chat with {{talkTo}}</a>
        </div>
      </div>

    • 重點在按鈕按下去之後，會把你選的人設定到 talkTo 這個屬性，接著 routerLink 被觸發的時候就會 route 到 /users/:username

  • 接著要設定 ChatComponent 的 controller，來取得是要跟「誰」對話的資訊

      // ...(略)
        constructor(
          private route: ActivatedRoute,
          private router: Router,
          private chatBotService: ChatBotService,
          private userService: UserService) { }
    
        ngOnInit() {
          this.route.params.subscribe((params: Params) => {
            this.messages = [];
            this.user = this.userService.getUser();
            this.guest = params['username'];
          })
        }
        // ...(略)

    • 這裡沒什麼新的東西，一樣是從 ActivatedRoute 取得傳入的 username
    • 其餘的部份是透過 setInterval 處理的假對話，有興趣的可以再看原始碼

  • 最後一步就是關閉 Secondary Route(聊天也有結束的一刻)，到 ChatListComponent 與 ChatComponent 的 close 方法中實作以下片段

      this.router.navigate([{outlets:{ chat: null}}]);

    • 這個方法是透過 Router 這個 service 的 navigate，傳入的參數…咦，似曾相識？！沒錯，就跟設定 routerLink 的綁定時一樣，只不過把要載的 path 設定成 null，這是透過程式關閉 Secondary Route 的方法之一
    • 承上，一般來講會設定一個按鈕來觸發 routerLink，但不一定總是有機會等使用者按，因此介紹了程式控制的方式

  • 最最最後再補充說明一下，一旦渲染了 Secondary Route，仍然是可以在不同 component 間 route，只要放的是相對路徑，Router 就會懂得前面是什麼東西。

  • 承上，如果在 Secondary Route 裡觸發 routerLink 時放的是絕對路徑(e.g. /forums)，那麼異動的只會是 root route，Secondary route 還是維持不變

小結:

• 這篇講了 Secondary Route
  • 可以的話盡量只用在它真的有意義的時候，否則其實這種 Routing 方式是增加複雜度
  • 同樣的，也盡量避免過多層的 Child Routes
  • 下一篇將探討 Routing 在處理權限的問題時是怎麼解決