Angular 重新加载组件不起作用

Question

我只是想在不刷新页面的情况下重新加载组件。

这是相关代码：

import { Component, VERSION, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router'

@Component({
  selector: 'my-home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit  {

  name = 'Angular ' + VERSION.major;
  time = new Date().getSeconds();

  constructor(private route: ActivatedRoute, private router: Router){

    this.router.routeReuseStrategy.shouldReuseRoute = () => false;

    this.time = new Date().getSeconds(); //updating the time on load.
  }

  ngOnInit(){
    console.log('iniit');
  }
}

在我的 html 中，我有一个按钮可以通过再次导航到 url 来重新加载组件。如有不妥请指教

<hello name="{{ name }}" time="{{time}}"></hello>
<p>
  Start editing to see some magic happen :) {{time}}
</p>

<a [routerLink]="['/home']">Go to Home </a>

当我点击按钮时，应该会因为组件重新加载而更新时间。但是每当我点击 link 时，都没有发生更新。

谁能告诉我如何在需要时重新加载组件而不重新加载我的 window（window 重新加载会破坏我的授权信息）。

Live demo

Answer 1

所以问题是 angular 知道您正在路由到您所在的同一页面。所以首先你必须告诉angular当你路由到你所在的同一条路线时重新加载。

像这样：

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: "reload"})],
  exports: [RouterModule]
})

然后你必须告诉 angular 如果你想总是运行你路由守卫。（可选）

{
  path:"home",
  component: HomeComponent,
  ... your guards ...
  runGuardsAndResolvers: "always",
}

还有更多内容，但如果您需要，here。

演示： https://stackblitz.com/edit/angular-ivy-g29jum?file=src%2Fapp%2Fapp.route.module.ts

Angular 重新加载组件不起作用

Angular reloading component does not work

angular

angular8

angular-router

angular-router-events