angular+ 路由學習 （五）多路由出口學習

• 關於第二路由，即命令路由和主路由無命名的區別：
  • 命名路由和主路由互不依賴
  • 命名路由可以和其他路由組合使用，而主路由只能支持一條無命名路由
  • 命名路由可以顯示在命令出口中
• 通俗的說；<router-outlet></router-outlet>是模塊的路由出口；現在我想再加一個模塊；這個模塊也放在主模塊中；即使用命名路由作為第二路由出口，顯示這個模塊在主要模塊中；
• 使用方法：在主頁面中app.component.html中，添加第二路由出口，並添加導航

• <!--The content below is only a placeholder and can be replaced.-->
  <h1>Angular Router</h1>
  <nav>
    <!-- 路由跳轉一 -->
  <a [routerLink]="[ '/crisis-center' ]" routerLinkActive="active">Crisis Center</a>
  <a [routerLink]="[ '/heroes' ]" routerLinkActive="active">heroes</a>
  <!-- 第二路由的導航顯示 -->
  <a [routerLink]="[{ outlets: { popup: ['compose']}}]">第二路由Contact</a>
    <!-- 路由跳轉二 -->
  <!-- <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
  <a routerLink="/heroes" routerLinkActive="active">heroes</a> -->
  </nav>
  <!-- 路由出口，占位符，可將顯示在出口的組件顯示在這里 -->
  <!-- 轉場：讓@routeAnimation 觸發器綁定到需要應用路由動畫到元素上，routerOutlet 導出成outlet 變量，綁定一個到路由出口的引用
      函數根據activatedRoute 提供的data對象來返回動畫屬性
  -->
  <div [@routeAnimation]="getAnimationData(routerOutlet)">
      <router-outlet #routerOutlet="outlet"></router-outlet>
    </div>
  <!-- 每個模塊，路由器只能支持一個無名主路由出口，模塊可以有多個命名路由出口，以此可以同時根據不同路由顯示不同內容 -->
    <!-- 第二路由出口: 不依賴主路由，可以和其他路由組合使用，顯示在命令出口位置 -->
    <router-outlet name="popup"></router-outlet>

   

• 創建一個組件，讓這個組件作為這個第二路由出口的顯示；ng g component compose-message
• 將第二路由導入主模塊的路由中；

• import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  
  import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
  import { ComposeMessageComponent } from './compose-message/compose-message.component'; // 添加第二路由
  const routes: Routes = [
   { path: 'compose' , component: ComposeMessageComponent, outlet: 'popup'},
    { path: '', redirectTo: 'heroes', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
  
  ];
  // .forRoot()-- 在應用的頂級配置路由器，提供路由需要的服務提供商和指令，基於瀏覽器當前URL執行首次導航
  // enableTarcing -- 查看導航在生命周期中發生的事件，並輸出到控制台
  @NgModule({
    imports: [
      RouterModule.forRoot(routes, { enableTracing: false })
    ],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }

   

• compose-message 組件代碼

• <h3>Contact Crisis Center</h3>
  <div *ngIf="details">
    {{ details }}
  </div>
  <div>
    <div>
      <label>Message: </label>
    </div>
    <div>
      <textarea [(ngModel)]="message" rows="10" cols="35" [disabled]="sending"></textarea>
    </div>
  </div>
  <p *ngIf="!sending">
    <button (click)="send()">Send</button>
    <button (click)="cancel()">Cancel</button>
  </p>

   

• import { Component, HostBinding } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-compose-message',
    templateUrl: './compose-message.component.html',
    styleUrls: ['./compose-message.component.css']
  })
  export class ComposeMessageComponent {
    details: string;
    message: string;
    sending = false;
  
    constructor(private router: Router) { }
  
    send() {
      this.sending = true;
      this.details = 'Sending Message...';
  
      setTimeout(() => {
        this.sending = false;
        this.closePopup();
      }, 1000);
    }
  
    cancel() {
      this.closePopup();
    }
  //  清除第二路由；即移除路由出口，清除導航url顯示
    closePopup() {
      // Providing a `null` value to the named outlet
      // clears the contents of the named outlet
      this.router.navigate([{ outlets: { popup: null } }]);
    }
  }

   

• 視圖顯示