angular - 角度重新加载组件不起作用
问题描述
我只是想重新加载组件而不刷新页面。
这是代码:
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>
当我单击按钮时,由于组件重新加载,它应该更新时间。但是每当我点击链接时,都不会及时更新。
任何人都可以建议我如何在需要时重新加载组件而不重新加载我的窗口(窗口重新加载会杀死我的身份验证信息)。
解决方案
所以问题是角度知道你正在路由到你所在的同一页面。所以首先你必须告诉 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
推荐阅读
- powershell - 在powershell cmdlet中调用函数作为参数
- javascript - 在包含可观察对象和字符串 prop/value 的对象数组上使用 forkJoin——保留关联的字符串
- amazon-redshift - 忽略 redshift 存储过程中发生的错误
- ruby-on-rails - RoR Redis 订阅 rspec 存根
- python - 如何使用递归函数返回“真”或假?
- python - 使用按钮从文本框中附加组合框值
- node.js - 在 React 中播放来自 websocket 流的 pcm 音频
- node.js - NodeJS / Express:为用户帐户添加默认订阅期
- c# - Dynamically call async method
- vagrant - 反复重置/中止后流浪连接超时