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