Angular 5 - 不执行构造函数和 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 没有被执行。

在我点击一个元素后，这两个元素就会执行。

更新:Plunker 代码:https://embed.plnkr.co/mCJGo60sxQLQohWRYC3O/

编辑:要查看问题，您需要将一个按钮从一组移动到另一组，然后单击您移动的同一按钮。您会看到绑定(bind)尚未完成。

Answer 1

路由时，如果只有路由器链接的参数发生变化，(在您的情况下为:card.id)Angular 不会破坏并重新创建您的组件。

Angular 仅在您的原始路线发生变化时才销毁并重新创建组件。

因此没有调用 onInit。

如果您的组件中需要 card.id，您可以像这样订阅参数:

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

请注意，您需要在卡片编辑组件中导入并注入(inject) 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 {}