我建立了一个网站,其中模板已划分为组件。模板的页眉和页脚在main.component.html文件中,正文注入了router-outlet。
改变导航的唯一部分是身体。页眉和页脚保持不变。共享storeid查询参数以动态构建主体。
我遇到问题的地方是我必须从main.component.ts文件中获取storeid查询参数。我不知道如何使用我当前的路由配置。
以下是路线配置:
const routes: Routes = [
{
path: '',
component: HomeLayoutComponent, // HOME PAGE
children: [
{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' },
]
},
{
path: '', // I TRIED ':storeid' here but negative
component: MainLayoutComponent, // MAIN LAYOUT IS DIVIDED AS DESCRIBED IN QUESTION. THIS IS THE STOREID I HAVE TO FETCH FROM HERE
children: [
{ path: 'event-details/:storeid', component: EventDetailsComponent }, // SO AS HERE TOO.
{ path: '', redirectTo: '/home', pathMatch: 'full' },
]
},
{ path: 'error-404', component: Error404PageComponent },
{ path: 'error-500', component: Error500PageComponent },
{ path: '**', component: HomeComponent }
];
谢谢
如果要将数据从父组件传递到子组件,则需要使用两件事:@Input和属性绑定。
如果要将数据从子组件传递回父组件,可以使用@Output和EventEmitter事件绑定
请参阅以下网址,因为我已回答相关问题。 Angular 6 Communicating between Parent&Child components using @Output
希望这对以正确的方式解决您的问题很有用。
大卫可能有点晚了,但我想我有解决你的问题的办法。
通常,当使用params时,通过你的路线,我们通过注入ActivatedRoute
来访问这些参数,然后通过订阅暴露的params
可观察量或通过使用snapshot.params
直接从当前url获取params。
export class {Your}Component implements OnInit {
params
constructor(private route: ActivatedRoute, ) { }
ngOnInit() {
this.route.params
.pipe(first())
.subscribe(x => {
this.params = x
});
this.params = this.route.snapshot.params
}
}
这里棘手的部分(这是你要问的问题)是通过这种类型的访问,我们只能得到当前路段中传递的参数。
最简单的解决方案是使用不同的ParamsInheritanceStrategy。通过将继承策略设置为always
,您将能够访问附加到子段的组件中属于父路由段的params。使用这种策略时棘手的部分是,如果你有两个具有相同名称的参数,它们将覆盖,例如,如果你的路线是store/:storeId/route/:storeId/child
,那么第二个:storeId
将覆盖前一个,如果它是从与段右侧相关的组件调用的第二个:storeId
(first => second
从左到右)。
你可以在StackBlitz查看一个有效的例子