Angular 5 - Konstruktor und ngOnInit werden nicht ausgeführt

Question

Ich verwende Angular 5 in Kombination mit SortableJs.

Auf einer Seite habe ich mehrere Karten gruppiert aufgelistet.

HTML sieht aus wie

<div class="group" *ngFor="let group of groups" [sortablejs]="group.cards" [sortablejsOptions]="sortableOptions"> 
    <div class="card" *ngFor="let card of group.cards"> 
     <button routerLink="card/edit/{{card.id}}">Edit</button> 
    </div> 
</div> 

Nachdem ich eine Karte von einer Gruppe zur anderen bewegen und ich auf Schaltfläche Bearbeiten es mich auf eine Seite umgeleitet wird, wo ich die ausgewählte Karte bearbeiten können.

Wenn es mich auf diese Seite umleitet, werden der Konstruktor und ngOnInit nicht ausgeführt.

Nachdem ich auf ein Element geklickt habe, werden diese beiden ausgeführt.

Update: Plunker Code: https://embed.plnkr.co/mCJGo60sxQLQohWRYC3O/

EDIT: Um zu sehen, das Problem, das Sie brauchen, um eine andere Taste von einer Gruppe zu bewegen, dann die gleiche Taste klicken Sie bewegt. Sie werden sehen, dass die Bindung nicht erfolgt ist.

Answer 1

Wenn sich beim Routing nur die Parameter Ihres Router-Links ändern, wird (in Ihrem Fall: card.id) Angular die Komponente nicht zerstören und neu erstellen.

Angular zerstört und erstellt die Komponente nur, wenn sich die ursprüngliche Route ändert.

Daher OnInit wird nicht aufgerufen.

Wenn Sie die card.id in Ihrer Komponente benötigen, können Sie den params wie diese abonnieren:

constructor(route:ActivatedRoute) { 
    route.params.subscribe(val => { 
    console.log("Button ID: " + val.id); 
    }); 
} 

Beachten Sie, dass Sie benötigen ActivatedRoute in Ihrer Karte bearbeiten Komponente zu importieren und zu injizieren.

Entire Code für App-Komponente:

//our root app component 
import {Component, NgModule, VERSION, OnInit} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import { SortablejsModule, SortablejsOptions } from 'angular-sortablejs'; 
import { Routes, RouterModule, ActivatedRoute } from '@angular/router'; 

@Component({ 
    selector: 'my-app', 
    template: `<router-outlet></router-outlet>`, 
}) 
export class App { 

} 

@Component({ 
    selector: 'my-cards', 
    template: ` 
    <p> Try to move buttons </p> 
    <div class="group" *ngFor="let group of groups" [sortablejs]="group.cards" [sortablejsOptions]="sortableOptions"> 
    <div class="card" *ngFor="let card of group.cards"> 
     <button routerLink="card/edit/{{card.id}}">Edit {{card.id}}</button> 
    </div> 
    <hr /> 
</div> 
    `, 
}) 
export class Cards { 
    groups = [ 
    { 
     id: 1, 
     cards: [ 
     { 
      id: 1, 
     }, 
     { 
      id: 2, 
     }, 
     { 
      id: 3, 
     } 
     ] 
    }, 
    { 
     id: 2, 
     cards: [ 
     { 
      id: 4, 
     }, 
     { 
      id: 5, 
     }, 
     { 
      id: 6, 
     } 
     ] 
    } 
    ]; 
    sortableOptions: SortablejsOptions = { 
    group: 'checks' 
    } 
} 

@Component({ 
    selector: 'my-card-edit', 
    template: ` 
    <p routerLink="">Go Home</p> 
    <p>{{content}}</p> 
    <input type="text" value="{{content}}"> 
    `, 
}) 
export class CardEdit implements OnInit { 
    content = "content here"; 

    constructor(route: ActivatedRoute) { 
    route.params.subscribe(val => { 
    console.log("Button ID: " + val.id); 
    }); 
    } 



} 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    SortablejsModule.forRoot({ 
     animation: 0, 
    }), 
    RouterModule.forRoot([ 
     {path: '', component: Cards}, 
     {path: 'card/edit/:id', component: CardEdit} 
    ]) 
    ], 
    declarations: [ App, Cards, CardEdit ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}