在Angular中,你可以使用字符串数组来定义多个出口。以下是一个示例:
首先,你需要在app.module.ts
文件中导入所需的模块:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';
const routes: Routes = [
{
path: '',
component: HomeComponent,
outlet: 'primary' // 设置主要出口
},
{
path: '',
component: AboutComponent,
outlet: 'secondary' // 设置次要出口
},
{
path: 'contact',
component: ContactComponent,
outlet: 'secondary' // 设置次要出口
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
然后,在app.component.html
文件中添加出口标记:
最后,在app.component.ts
文件中添加路由链接:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
template: `
Home
About
Contact
`
})
export class AppComponent {
constructor(private router: Router) { }
}
这样,当你点击链接时,不同的组件将会通过不同的出口渲染到页面中。
希望以上内容对你有所帮助!