我正在使用以下文件结构的Angular 2项目 .
-
HeaderComponent.ts
-
AppComponent.ts
-
Page1Component.ts
-
Page2Component.ts
我在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>
在我的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");
});
}
}
我的Page1Component有以下样本表格
<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>
因此,当我在 Headers <li><a [routerLink]="['/page1']">Page1</a></li>
中单击Page1 routerLink时,它会在 <router-outlet></router-outlet>
中加载Page1Component . 我在表单中填写了一些细节,当我在提交表单之前再次在页眉中点击Page1 routerLink时,我希望Page1Component重新加载,这样我的表单就会进入初始状态,但它在点击时没有做任何事情 . 我试图重置 routerOnActivate()
和 routerCanDeactivate()
中的表单,但没有调用任何函数 . 所以基本上,当我点击[routerLink]时,我希望我的组件再次加载
如果我能更好地解释,请告诉我 .
3 回答
您可以使用
(click)
事件在代码中导航到某个虚拟组件,然后再次返回到上一个组件 .router.navigate()
中有一个参数可以跳过历史记录更改,因此后退按钮可以继续使用此hack .另一种方法是通过代码删除routerLink和naviagate:
现在gotoPage1只是在现有网址上附加一个#X号码
您可以使用虚拟路径来处理这种情况,
添加一个虚拟路由到您的路由器:
dummyComponent.ts
现在在组件内添加 changeRoute 函数:
这将重新渲染你的组件和休息所有将由Angular照顾 .