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

【问题标题】：Angular 2 Page / Component not reloadingAngular 2页面/组件未重新加载
【发布时间】：2019-12-12 00:38:08
【问题描述】：

使用网站上的导航并从

到

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

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

【问题讨论】：

导入：[RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})]，不起作用

标签： javascript angular

【解决方案1】：

你是如何在男士组件中获取参数的？

这是一个有效的堆栈闪电战https://stackblitz.com/edit/angular-buahdy

它使用 route.params 可观察的，当路由改变时发出，如果你使用的是快照，它不会改变，因为它不是可观察的。

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

constructor(private route: ActivatedRoute) { }

并在模板中使用异步管道显示类别

Category {{ category$ | async }}

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

【讨论】：

【解决方案2】：

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

WebsiteComponent模板：

<!-- some code -->

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

【讨论】：

网站渲染良好。我没有渲染问题，问题是在加载组件/页面后重新加载它
MensPageComponent 没有问题，问题是如果页面已经使用相同的 url 加载，路由器不允许再次加载。因此，如果您加载localhost:4200/mens/shirts，它将加载，因为它认为它是一条新路线，但如果您尝试从衬衫换成帽子或套头衫，它将不会加载，因为它认为页面已经加载。我不是在谈论更改 URL 栏中的 URL，因为这会起作用我的意思是使用 [routerLink]= 更改页面
我尝试过导入：[RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})]，但这不起作用
可能和你读取参数的方式有关。如果您可以放置该组件的代码，那将会很有帮助。