gpt4 book ai didi

angular - 通过angular2中的路由器动态子组件

转载 作者:行者123 更新时间:2023-12-02 17:16:08 26 4
gpt4 key购买 nike

我有通过路由配置的应用程序的主要细节类型。

    Routes = [
{
path: '',
redirectTo: '/master',
pathMatch: 'full'
},
{
path: 'master',
component: MasterComponent,
children: [
{
path: ':id',
component: DetailsComponent
}
]
}
]

主组件的html

<div>...</div>
<router-outlet></router-outlet>

它工作得很好。但是现在我的 child 有不同的类型和数据。所以我不想渲染 DetailsComponent,而是渲染 DetailsType1Component、DetailsType2Component、DetailsType3Component...,它们是固定的和预定义的。我想根据路由中存在的 id 获取数据,然后确定它是什么类型的 child ,然后呈现 DetailsType1Component 之一......

如何实现?

谢谢

最佳答案

Angular 希望路由是静态的。它提供了 Router.resetConfig如果您需要一些动态功能,但我最好在这里使用另一种方法。您可以根据提供的 ID 动态加载详细信息组件。假设我们有一些 Details Component 容器元素:

@Component({
selector: 'details-container',
template: `
<ng-container *ngComponentOutlet="content"></ng-container>
`
})
export class DetailsComponent implements OnInit {
content

constructor(private route: ActivatedRoute) {
let id = this.route.snapshot.paramMap.get('id')
switch (id) {
case '1':
this.content = DetailsType1Component
break
case '2':
this.content = DetailsType2Component
break
default:
this.content = DetailsTypeDefaultComponent
}
}
}

它使用*ngComponentOutlet 指令加载您需要的组件。在从 url 中读取 id 参数后,在构造函数中决定究竟是哪一个。

Plunkr

关于angular - 通过angular2中的路由器动态子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46319498/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com