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。

app-component的整个代码：

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

Angular 5 - 构造函数和ngOnInit未执行

1 个答案: