angular 嵌套路由-蒲公英云

angular 嵌套路由

桃扇骨 2022-06-01 07:00 448阅读 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}
    ] 
  },