首页 前端开发 Angular 2 - 再次单击 routerLink 时重新加载组件
Angular 2 - 再次单击 routerLink 时重新加载组件
[英] Angular 2 - Reload component when routerLink clicked again
本文介绍了Angular 2 - 再次单击 routerLink 时重新加载组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在处理具有以下文件结构的 Angular 2 项目.
HeaderComponent.ts AppComponent.ts Page1Component.ts Page2Component.ts 我的 HeaderComponent.ts 中有以下模板
<div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">WebSiteName</a> <div class="collapse navbar-collapse" id="myNavbar"><ul class="nav navbar-nav"><li class="active"><a [routerLink]="['']">首页</a></li><li><a [routerLink]="['/page1']" >Page1</a></li><li><a [routerLink]="['/page2']">Page2</a></li>
</nav>
在我的 AppComponent 中有以下路由
@Component({选择器:'我的应用'，模板:`<my-header></my-header><路由器插座></路由器插座>`，指令:[ROUTER_DIRECTIVES, HeaderComponent]})@路由([{path: '/', 组件: HomeComponent},{路径:'/page1'，组件:Page1Component}{路径:'/page2'，组件:Page2Component}])导出类 AppComponent {ngAfterViewInit() {//在导航栏中显示活动选项卡$(".nav a").on("click", function () {$(".nav").find(".active").removeClass("active");$(this).parent().addClass("active");});}}和我的 Page1Component 具有以下示例表单
<form [ngFormModel]="myForm" (ngSubmit)="onSubmit()"><div class="form-group"><label for="firstName">名字</label><input [ngFormControl]="myForm.find('firstName')" type="text" id="firstName" class="form-control"> <div class="form-group"><label for="lastName">姓氏</label><input [ngFormControl]="myForm.find('lastName')" type="text" id="lastName" class="form-control">
<div class="form-group"><label for="email">Mail</label><input [ngFormControl]="myForm.find('email')" type="email" id="email" class="form-control">
<div class="form-group"><label for="password">密码</label><input [ngFormControl]="myForm.find('password')" type="password" id="password" class="form-control">
<button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">注册</button></表单></节>
因此，当我在标题 Page1 routerOnActivate() 和 routerCanDeactivate() 中重置表单，但没有调用任何函数.所以基本上，当我点击 [routerLink]
时，我希望我的组件再次加载如果我能解释得更好，请告诉我.
解决方案
您可以使用虚拟路由来处理这种情况，
向路由器添加一条虚拟路由:
{ 路径:'dummy'，组件:dummyComponent }dummyComponent.ts
//路由变化的虚拟组件@成分({选择器:'虚拟'，模板: ''})导出类 dummyComponent{}现在在你的组件中添加 changeRoute 函数:
changeRoute(url) {this.router.navigateByUrl('/dummy', { skipLocationChange: true });setTimeout(() => this.router.navigate(url));}//'skipLocationChange' 将避免/dummy 进入历史 API这将重新渲染你的组件，其余的都将由 Angular 处理.
I am working on Angular 2 project with following file structure.
HeaderComponent.ts
AppComponent.ts
Page1Component.ts
Page2Component.ts
I have following template in my HeaderComponent.ts
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a [routerLink]="['']">Home</a></li>
<li><a [routerLink]="['/page1']" >Page1</a></li>
<li><a [routerLink]="['/page2']">Page2</a></li>
</ul>
</div>
</div>
</nav>
with following routes in my AppComponent
@Component({
selector: 'my-app',
template: `
<my-header></my-header>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES, HeaderComponent]
})
@Routes([
{path: '/', component: HomeComponent},
{path: '/page1', component: Page1Component}
{path: '/page2', component: Page2Component}
])
export class AppComponent {
ngAfterViewInit() {
//To show the active tab in navbar
$(".nav a").on("click", function () {
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
}
}
and my Page1Component has following sample form
<section class="col-md-8 col-md-offset-2">
<form [ngFormModel]="myForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="firstName">First Name</label>
<input [ngFormControl]="myForm.find('firstName')" type="text" id="firstName" class="form-control">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input [ngFormControl]="myForm.find('lastName')" type="text" id="lastName" class="form-control">
</div>
<div class="form-group">
<label for="email">Mail</label>
<input [ngFormControl]="myForm.find('email')" type="email" id="email" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input [ngFormControl]="myForm.find('password')" type="password" id="password" class="form-control">
</div>
<button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">Sign Up</button>
</form>
</section>
So when I click on Page1 routerLink in header <li><a [routerLink]="['/page1']">Page1</a></li>, it loads the Page1Component in <router-outlet></router-outlet>. I fill some details in form and when I click on Page1 routerLink again in header before submitting the form, I want Page1Component to reload so my form comes to initial state but it doesn't do anything on click. I tried to reset form in routerOnActivate() and routerCanDeactivate() but none of the functions being called. So basically, I want my component to load again when I click on [routerLink]
Please let me know if I can explain better.
解决方案
You can take care of this scenario by using dummy route,
<a (click)="changeRoute(url)">
Add one dummy route to your router:
{ path: 'dummy', component: dummyComponent }
dummyComponent.ts
//Dummy component for route changes
@Component({
selector: 'dummy',
template: ''
})
export class dummyComponent{}
Now inside your component add changeRoute function:
changeRoute(url) {
this.router.navigateByUrl('/dummy', { skipLocationChange: true });
setTimeout(() => this.router.navigate(url));
}
// 'skipLocationChange' will avoid /dummy to go into history API
This will re render your component and rest all will be taken care by Angular.
这篇关于Angular 2 - 再次单击 routerLink 时重新加载组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
