angular 巢狀路由

mylogin.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'mylogin',
    template: `
        <h1>登入頁</h1>
        <a routerLink="/mail">檢視郵件</a>
    `
})

export class MyLoginComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

mail.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'mail',
    template: `
        <h1>郵箱主頁面</h1>
        <a routerLink="/mail/outbox">發件箱</a>
        <router-outlet></router-outlet>
    `
})

export class MailComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

inbox.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'inbox',
    template: `
        <h1>收件箱</h1>
        <ul>
            <li>已讀郵件1</li>
            <li>已讀郵件2</li>
            <li>已讀郵件3</li>
        </ul>
    `
})

export class InboxComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

outbox.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'outbox',
    template: `
        <h1>發件箱</h1>
        <ul>
            <li>已發郵件1</li>
            <li>已發郵件2</li>
            <li>已發郵件3</li>
        </ul>
    `
})

export class OutboxComponent implements OnInit {
    constructor() { }

    ngOnInit() { }
}

app.router.ts

{ 
    path: 'mail', 
    component: MailComponent,
    children:[
      {path:'',component:InboxComponent},
      {path:'outbox',component:OutboxComponent},
      {path:'**',component:NotFoundComponent}
    ] 
  },