Angular 5 - Constructor и ngOnInit не выполняются

Question

Я использую Angular 5 в сочетании с SortableJs.

На странице я перечислил несколько сгруппированных карт.

HTML выглядит как

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

После того, как я переместил карточку из одной группы в другую и нажал кнопку "Изменить", она перенаправит меня на страницу, где я могу отредактировать выбранную карточку.

Когда он перенаправляет меня на эту страницу, конструктор и ngOnInit не выполняются.

После того, как я щелкну элемент, эти два будут выполнены.

Обновление: код Плункера: https://embed.plnkr.co/mCJGo60sxQLQohWRYC3O/

РЕДАКТИРОВАТЬ: Чтобы увидеть проблему, вам нужно переместить одну кнопку из одной группы в другую, а затем нажать ту же кнопку, которую вы переместили. Вы увидите, что привязка не завершена.

Answer 1

При маршрутизации, если изменяются только параметры ссылки на маршрутизатор, (в вашем случае:card.id) Angular не будет уничтожать и воссоздавать ваш компонент.

Angular уничтожает и воссоздает компонент, только если ваш исходный маршрут изменяется.

Следовательно onInit не вызывается.

Если вам нужен card.id в вашем компоненте, вы можете подписаться на следующие параметры:

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

Обратите внимание, что вам нужно импортировать и внедрять ActivatedRoute в компонент редактирования вашей карты.

Весь код для компонента приложения:

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