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/

编辑：要查看问题，您需要将一个按钮从一组移动到另一组，然后单击您移动的同一个按钮。你会看到绑定没有完成。

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