angular 嵌套路由

桃扇骨 2022-06-01 07:00 284阅读 0赞

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}
        ] 
      },