Eckige 2 - Reload Komponente, wenn routerLink wieder geklickt

Arbeite ich auf Eckige 2-Projekt mit folgenden Datei-Struktur.

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

Habe ich folgende Vorlage in meinem 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>

mit folgenden Strecken in meiner 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");
        });
    }
}

und meine Page1Component hat folgende Beispiel 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>

Also wenn ich auf Seite1 routerLink im header <li><a [routerLink]="['/page1']">Page1</a></li> ist, lädt er die Page1Component in <router-outlet></router-outlet>. Ich fülle einige details in form und wenn ich auf Seite1 routerLink wieder im header vor dem Absenden des Formulars möchte ich Page1Component neu zu laden, damit meine form kommt in den ursprünglichen Zustand, aber es nicht tun, alles auf klicken Sie auf. Ich habe versucht, zurücksetzen Formular in routerOnActivate() und routerCanDeactivate() aber keine der Funktionen aufgerufen wird. Also im Grunde möchte ich meine Komponente wieder zu laden wenn ich auf [routerLink]

Bitte lassen Sie mich wissen, wenn ich es besser erklären kann.

InformationsquelleAutor Ankush | 2016-06-05