3

我将 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/

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

4

1 回答 1

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 {}
于 2017-12-14T13:36:45.543 回答