Question

在网站上使用导航并从

开始

到

工作正常，但是当单击带有帽子之类的衬衫的其他类别时，组件/页面不会重新加载，我不确定为什么我没有收到错误，因此当您单击第一个类别时，它工作正常，但是在该类别中，如果您单击另一个则不会。

const routes: Routes = [
    {
        path : '',
        component: WebsiteComponent,
        children: [
            {
                path : '',
                component: HomePageComponent,
            },
            {
                path : 'mens',
                component: MensPageComponent
            },
            {
                path : 'mens/:category',
                component: MensPageComponent
            }
        ]
    }
];

Answer 1

您如何在男性元素中使用参数？

这里是https://stackblitz.com/edit/angular-buahdy

的堆叠闪电战

它使用route.params observable在路由更改时发出，如果您使用快照，则它不会更改，因为它不是可观察的。

category$ = this.route.params.pipe(map(params => params.category));

constructor(private route: ActivatedRoute) { }

并在模板中显示带有异步管道的类别

Category {{ category$ | async }}

当您从男装/鞋到男装/衬衫时，男装不会重新加载，只有类别参数已更改。通过route.params订阅参数是触发组件更新的方式。

Answer 2

在路由中使用children属性时。该组件将需要router-outlet来渲染那些children路由。

WebsiteComponent模板：

<!-- some code -->

<!-- where children routes are rendered -->
<router-outlet></router-outlet>

Angular 2页面/组件未重新加载

2 个答案: