Angulaire 2 - Reload composant lorsque routerLink cliqué de nouveau

Je suis en train de travailler sur Angulaire 2 du projet, avec la structure suivante.

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

J'ai modèle suivant dans mon 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>

avec les lignes suivantes dans mon 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");
        });
    }
}

et mon Page1Component a formulaire ci

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

Alors, quand je clique sur la page 1 routerLink dans l'en-tête <li><a [routerLink]="['/page1']">Page1</a></li>, il charge le Page1Component dans <router-outlet></router-outlet>. Je combler certaines des détails de forme et quand je clique sur la page 1 routerLink de nouveau dans l'en-tête avant de soumettre le formulaire, je veux Page1Component pour recharger donc mon formulaire est livré à l'état initial, mais il ne fait rien sur cliquez sur. J'ai essayé de réinitialiser le formulaire en routerOnActivate() et routerCanDeactivate() mais aucune des fonctions appelées. Donc, fondamentalement, je veux que mon composant à charger à nouveau lorsque je clique sur [routerLink]

S'il vous plaît laissez-moi savoir si je peux l'expliquer mieux.

OriginalL'auteur Ankush | 2016-06-05