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，在路由更改时发出，如果您使用的是快照，它不会更改，因为它不是可观察的。

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>