0

我只是想重新加载组件而不刷新页面。

这是代码：

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>

当我单击按钮时，由于组件重新加载，它应该更新时间。但是每当我点击链接时，都不会及时更新。

任何人都可以建议我如何在需要时重新加载组件而不重新加载我的窗口（窗口重新加载会杀死我的身份验证信息）。

现场演示

4

1 回答 1

3

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

像这样：

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

然后，如果您想始终运行路线守卫，则必须告诉 angular。（可选的）

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

还有更多，但如果你需要，可以在这里。

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

于 2020-07-27T06:46:52.090 回答