Angular 2 - 再次单击routerLink时重新加载组件 [英] Angular 2 - Reload component when routerLink clicked again

问题描述

我正在使用以下文件结构处理Angular 2项目。

I am working on Angular 2 project with following file structure.

• HeaderComponent.ts


• AppComponent.ts


• Page1Component.ts


• Page2Component.ts

• HeaderComponent.ts
• AppComponent.ts
• Page1Component.ts
• Page2Component.ts

我的HeaderComponent.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>

我的AppComponent中包含以下路线

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");
        });
    }
}

我的Page1Component有以下样本表格

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>

因此，当我点击标题< li><中的Page1 routerLink时a [routerLink] =['/ page1']> Page1< / a>< / li> ，它会在< router-outlet>中加载Page1Component < /路由器出口> 。我在表单中填写了一些细节，当我在提交表单之前再次在页眉中点击Page1 routerLink时，我希望Page1Component重新加载，所以我的表单进入初始状态，但它在点击时没有做任何事情。我试图重置 routerOnActivate（）和 routerCanDeactivate（）中的表单，但没有调用任何函数。所以基本上，当我点击[routerLink]

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{}

现在在您的组件中添加 changeRoute 功能：

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

这将重新渲染你的组件和休息所有将由Angular照顾。

This will re render your component and rest all will be taken care by Angular.

这篇关于Angular 2 - 再次单击routerLink时重新加载组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！