Angular2 路由问题和 ngOnInit 调用了两次

Question

我有一个非常奇怪的问题 Angular 2 路由到我路由到的组件中的 ngOnInit 被调用两次，并且浏览器中的路由越来越重置为原来的路线。

我在 MaintenanceModule 中有一个 NotificationListComponent 和一个 NotificationEditComponent。

在我的根 AppModule 中，我设置 RouterModule 将任何未映射的路由重定向到 /maintenance/list。

app.module.ts:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    RouterModule.forRoot([
      {path: "", redirectTo: "maintenance/list", pathMatch: "full"},
      {path: "**", redirectTo: "maintenance/list", pathMatch: "full"}
    ], {useHash: true}),
    CoreModule.forRoot({notificationUrl: "http://localhost:8080/notification-service/notifications"}),
    MaintenanceModule
  ],
  providers: [NotificationService],
  bootstrap: [AppComponent]
})
export class AppModule { }

并且我在 MaintenanceModule 中定义了 /maintenance/list 路线，它指向我的 NotificationListComponent，还有 /maintenance/edit/:id 路线指向我的 NotificationEditComponent.

maintenance.module.ts:

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      {path: "maintenance/list", component: NotificationListComponent, pathMatch: 'full'},
      {path: "maintenance/edit/:id", component: NotificationEditComponent, pathMatch: 'full'}
    ]),
    FormsModule
  ],
  declarations: [
    NotificationListComponent,
    NotificationEditComponent
  ]
})
export class MaintenanceModule {}

当我的应用程序加载时，它正确地遵循 /maintenance/list 路线，我可以在列表中看到我的所有通知。对于列表中的每个通知，都有一个编辑图标，它的 click 事件绑定到我的 NotificationListComponent

中的 edit(id: number) 方法

通知-list.component.ts:

@Component({
  templateUrl: 'notification-list.component.html'
})
export class NotificationListComponent implements OnInit {

  notifications: Notification[];
  errorMessage: string;

  constructor(private _notificationService: NotificationService,
              private _router: Router) {}

  ngOnInit(): void {
    this._notificationService.getNotifications()
      .subscribe(
        notifications => this.notifications = notifications,
        error => this.errorMessage = <any>error);
  }

  clearError(): void {
    this.errorMessage = null;
  }
}

通知-list.component.html:

<div class="row">
  <h1>Notification Maintenance</h1>

  <div *ngIf="errorMessage" class="alert-box alert">
    <span>{{errorMessage}}</span>
    <a class="right" (click)="clearError()">&times;</a>
  </div>

  <p-dataTable [value]="notifications" [sortField]="'code'" [responsive]="true" [sortOrder]="1" [rows]="10" [paginator]="true" [rowsPerPageOptions]="[10,50,100]">
    <p-header>Available Notifications</p-header>
    <p-column [field]="'code'" [header]="'Code'" [sortable]="true" [style]="{'width':'10%'}"></p-column>
    <p-column [field]="'name'" [header]="'Name'" [sortable]="true" [style]="{'width':'40%'}"></p-column>
    <p-column [field]="'roles'" [header]="'Roles'" [style]="{'width':'40%'}"></p-column>
    <p-column [field]="'notificationId'" [header]="'Edit'" [style]="{'width':'10%'}">
      <template let-row="rowData" pTemplate="body">
        <a [routerLink]="'/maintenance/edit/' + row['notificationId']"><span class="fa fa-pencil fa-2x"></span></a>
      </template>
    </p-column>
  </p-dataTable>
</div>

如您所见，edit(id: number) 方法应该导航到 /maintenance/edit/:id 路由。当我单击图标导航到该路线时，浏览器会在地址栏中闪烁正确的路线（例如 localhost:4200/#/maintenance/edit/2），但随后地址栏中的路线立即变回 localhost:4200/#/maintenance/list。即使在地址栏中路由返回到/maintenance/list，但在实际应用中我的NotificationEditComponent仍然可见。但是，我可以看到 ngOnInit 方法在我的 NotificationEditComponent 中被调用了两次，因为 id 被记录到控制台两次，如果我在 [=18] 中放置一个断点=] 函数，它两次命中该断点。

通知-edit.component.ts:

@Component({
  templateUrl: "notification-edit.component.html"
})
export class NotificationEditComponent implements OnInit{

  notification: Notification;
  errorMessage: string;

  constructor(private _notificationService: NotificationService,
              private _route: ActivatedRoute,
              private _router: Router) {
  }

  ngOnInit(): void {
    let id = +this._route.snapshot.params['id'];
    console.log(id);
    this._notificationService.getNotification(id)
      .subscribe(
        notification => this.notification = notification,
        error => this.errorMessage = <any>error
      );
  }
}

这似乎也导致了其他问题，因为当尝试将 input 值绑定到我的 NotificationEditComponent 中的值时，例如使用 [(ngModel)]="notification.notificationId"，该值未显示在屏幕上，即使我可以看到 Augury chrome 扩展，以及将对象记录到控制台，该值已填充到组件中。

通知-edit.component.html:

<div class="row">
  <h1>Notification Maintenance</h1>

  <div *ngIf="errorMessage" class="alert-box alert">
    <span>{{errorMessage}}</span>
    <a class="right" (click)="clearError()">&times;</a>
  </div>

  <p-fieldset [legend]="'Edit Notification'">
    <label for="notificationId">ID:
      <input id="notificationId" type="number" disabled [(ngModel)]="notification.notificationId"/>
    </label>
  </p-fieldset>

</div>

有人知道为什么会这样吗？

更新：

我删除了对 NotificationService 的调用，仅用一些模拟数据替换了它们，然后路由开始工作了！但是，只要我向我的服务添加调用，就会遇到与上述相同的问题。我什至删除了 CoreModule 并直接将服务添加到我的 MaintenanceModule，但每当我使用实际服务而不是模拟数据时仍然遇到同样的问题。

notification.service.ts:

@Injectable()
export class NotificationService {
  private _notificationUrl : string = environment.servicePath;

  constructor(private _http: Http) {
  }

  getNotifications(): Observable<Notification[]> {
    return this._http.get(this._notificationUrl)
      .map((response: Response) => <Notification[]>response.json())
      .catch(this.handleGetError);
  }

  getNotification(id: number): Observable<Notification> {
    return this._http.get(this._notificationUrl + "/" + id)
      .map((response: Response) => <Notification>response.json())
      .catch(this.handleGetError);
  }

  postNotification(notification: Notification): Observable<number> {
    let id = notification.notificationId;
    let requestUrl = this._notificationUrl + (id ? "/" + id : "");
    return this._http.post(requestUrl, notification)
      .map((response: Response) => <number>response.json())
      .catch(this.handlePostError);
  }

  private handleGetError(error: Response) {
    console.error(error);
    return Observable.throw('Error retrieving existing notification(s)!');
  }

  private handlePostError(error: Response) {
    console.error(error);
    return Observable.throw('Error while attempting to save notification!');
  }
}

并且该服务似乎运行正常 - 我可以看到端点成功 returns 数据并且当我查看我的 NotificationEditComponent 时我可以看到数据看起来正确Augury chrome 扩展。但是数据没有显示在模板中，URL returns 到 /maintenance/list 中的路由即使 /maintenance/edit/:id 路由的模板仍然显示。

更新 2：

根据@user3249448 的建议，我将以下内容添加到我的 AppComponent 中以进行一些调试：

constructor(private _router: Router) {
  this._router.events.pairwise().subscribe((event) => {
    console.log(event);
  });
}

这是我单击 "edit" 链接之一时的输出：

Answer 1

我的猜测是您的浏览器将您的编辑 link 解释为实际的 link，而不是按照您的意愿执行。这是基于您看到闪光灯这一事实 - 听起来浏览器正在尝试访问有问题的 link。

尝试更改您在通知列表中单击的项目以将通知从锚标记编辑为简单跨度或 div。如果您没有收到闪光灯，那么您就知道那是您的问题。

Answer 2

在获得@user3249448 的调试帮助后终于能够解决问题。

结果我得到了这个 NavigationError，即使没有错误被记录到控制台：

这是完整的堆栈跟踪：

TypeError: Cannot read property 'notificationId' of undefined
    at CompiledTemplate.proxyViewClass.View_NotificationEditComponent0.detectChangesInternal (/MaintenanceModule/NotificationEditComponent/component.ngfactory.js:487:49)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:80125:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:80320:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:80110:18)
    at CompiledTemplate.proxyViewClass.View_NotificationEditComponent_Host0.detectChangesInternal (/MaintenanceModule/NotificationEditComponent/host.ngfactory.js:29:19)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:80125:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:80320:44)
    at ViewRef_.detectChanges (http://localhost:4200/vendor.bundle.js:60319:20)
    at RouterOutlet.activate (http://localhost:4200/vendor.bundle.js:65886:42)
    at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/vendor.bundle.js:24246:16)
    at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:24213:26)
    at http://localhost:4200/vendor.bundle.js:24149:58
    at Array.forEach (native)
    at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:24149:29)
    at ActivateRoutes.activate (http://localhost:4200/vendor.bundle.js:24123:14)

所以基本上，我的模板在返回对我的 Web 服务的调用之前被呈现，并且我的模板无法正确呈现，因为 notification 是 undefined，所以我得到了这个 NavigationError，这导致了所描述的行为（似乎不应该将此错误记录到控制台，而不必在 AppComponent 中添加额外的调试代码？）。

要解决此问题，我所要做的就是向我的 fieldset 添加一个 *ngIf，其中包含有关 notification.

的所有信息

<p-fieldset [legend]="'Edit Notification'" *ngIf="notification">

现在，一旦从 Web 服务返回数据，我的模板就会正确加载。

Angular2 路由问题和 ngOnInit 调用了两次

Angular2 routing issue and ngOnInit called twice

routing

ngoninit

angular

更新：

更新 2：