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

Question

使用网站上的导航并从

http://localhost:4200/mens

至

http://localhost:4200/mens/shirts

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

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

Answer 1

您如何在男士组件中获取参数？

这是一个有效的 stackblitz https://stackblitz.com/edit/angular-buahdy

它使用route.params observable，当路由改变时发出，如果你使用快照，它不会改变，因为它不是一个observable。

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

constructor(private route: ActivatedRoute) { }

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

Category {{ category$ | async }}

当您从男士/鞋子转到男士/衬衫时，男士组件不会重新加载，只有类别参数发生了变化。使用route.params 订阅参数是触发组件更新的方式。