我有一个带有动态路由的导航栏，我也想使用1个模板。因此，如果我向http：// domain / com / aaa发出请求，那么我将从数组中获取数据。
我怎样才能做到这一点？
navbar.component.html：
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li *ngFor="let item of items"><a [routerLink]="[item.slug]" [routerLinkActive]="['is-active']">{{item.name}}</a></li>
</ul>
</div><!-- /.navbar-collapse -->
navbar.componetns.ts：
items = [
{ id:"1" , slug: "aaa" , name: "AAA"},
{ id:"2" , slug: "bbb" , name: "BBB"},
{ id:"3" , slug: "ccc" , name: "CCC"},
{ id:"4" , slug: "ddd" , name: "DDD"}
];
app.routing.ts：
const APP_ROUTES: Routes = [
{path: '' , component: HomeComponent}
];
export const routing = RouterModule.forRoot(APP_ROUTES);
item.service：
export class ItemService {
getItems() {
return [
{ id:"1" , slug: "aaa" , name: "AAA"},
{ id:"2" , slug: "bbb" , name: "BBB"},
{ id:"3" , slug: "ccc" , name: "CCC"},
{ id:"4" , slug: "ddd" , name: "DDD"}
];
}
constructor() { }
}
您不能在根组件中设置参数，因为根不是角度组件。看到这个评论https://github.com/angular/angular/issues/1858#issuecomment-151326461
之所以不起作用，是因为放置其中的index.html不是角度分量。因此，Angular将不会编译此元素。而且Angular不会在运行时读取属性值，而只是在编译时读取，否则会降低性能。
因此，您需要一个通用的组件，并将此子弹作为参数添加到路由器中。
const APP_ROUTES: Routes = [
{path: '' , component: HomeComponent},
{path: '/common:slug' , component: CommonComponent}
];
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句