Angular 4 Component ngOnInit 未在每个路由请求上调用

Question

我最近才开始从 Angular 1.5 开始深入研究 Angular 4。我正在使用用户路由并将 API 数据从服务中提取到用户组件中。

与 1.* 中的控制器不同，组件似乎保持静态，每次请求都会刷新它们。

是否有在每个新路由请求上调用 ngOnInit 函数？

我的用户组件类：

// url structure: /user/:id
export class UserComponent implements OnInit {

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {

      // doesn't log new id on route change
      let id = this.route.snapshot.params['id'];
      console.log(id);

      this.route.params
        .switchMap(params => this.userService.getUser(params['id']))
        .subscribe(user => {
          // logs new id on route change
          let id = this.route.snapshot.params['id'];
          console.log(id);

          this.user = user
        });
    }
}

更新：

找到了一个我认为最适合我的方案的解决方案。根据我的问题和进一步调查的几个答案和 cmets，订阅路线似乎是要走的路。这是我更新的组件：

export class UserComponent {

  user;
  id;

  constructor(
    private userService: UserService,
    private route: ActivatedRoute
  ) {}


  ngOnInit() {
    this.route.params
      .subscribe(params => this.handleRouteChange(params));
  }

  handleRouteChange(params) {
    this.id = params['id'];

    switch (this.id) {
      case '1':
        console.log('User 1');
        break;

       case '2':
        console.log('User 2');
        break;

       case '3':
        console.log('User 3');
        break;
    }

    this.userService.getUser(this.id).
      subscribe(user => this.user = user);
  }

}

Answer 1

url 看起来像“...?id=1”还是“../:id”，并且您希望组件在每次 GET 参数更改时记录 id？问题在here 讨论。我发现一个更好的解决方案是here。我自己没有测试过，但这应该可以。

第二个链接显示了如何订阅组件内的路由更改，我认为这基本上是您想要做的。它将允许您处理 ngOnInit 内的 GET 参数更改。我不确定当您最初导航到 URL 时路由订阅是否会运行，因此您可能希望处理路由事件的函数调用 doCheck()，并将 ngOnInit 更改为 ngAfterContentInit

ngOnInit 仅在change detection 上运行，GET 更改似乎不会触发它，这让我感到惊讶。

Tl;dr - 在构造函数中订阅路由更改事件并创建一个处理发出事件的函数。该函数应该包含您在 ngOnInit() 中的逻辑。

Answer 2

如果路由相同但参数发生变化，Angular 更喜欢 - 默认情况下 - 重用相同的组件而不是实例化一个新组件。

好消息！这是一种可自定义的行为，您可以通过实现自己的RouteReuseStrategy 来强制实例化一个新的组件实例：

export class MyRouteReuseStrategy extends DefaultRouteReuseStrategy {
  shouldReuseRoute(next: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
    let name = next.component && (next.component as any).name;
    return super.shouldReuseRoute(next, current) && name !== 'UserComponent';
  }
}

在你的模块中：

@NgModule({
  ...
  providers:[{
      provide: RouteReuseStrategy,
      useClass: MyRouteReuseStrategy}]
  ...
})
export class AppModule {}

（此代码或多或少取自this article，尤其是对name 属性的检查可能不太准确...）

请注意，重新实例化同一组件时可能会出现一些性能缺陷。所以也许你最好使用 observables 属性而不是快照。

Answer 3

您好，您必须像这样使用 switchMap：

this.sub = this.route.paramMap
  .switchMap((params: ParamMap) =>
  this.firebaseService.getProductsByCategory(params.get('category'))).subscribe(products => {
  this.products = products;
  this.count = products.length;
});

这对我有用。

Answer 4

我意识到这是事后的事，但我认为最好不要留下一个不完整的解决方案，新手可能会在他们的项目中实施。

响应原帖的更新：在使用完 Observables 后取消订阅 Observables 很重要，否则可能会将引用留在内存中。这是一个简单的例子。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Subscription, Observable } from 'rxjs';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class Example implements OnInit, OnDestroy {
  protected _routeChangeSubscription: Subscription;

  constructor(
    protected _activatedRoute: ActivatedRoute,
  ) { }

  ngOnInit(): void {
    this._routeChangeSubscription = this._activatedRoute.params.subscribe(this._routeChangeHandler);
  }

  ngOnDestroy(): void {
    this._routeChangeSubscription.unsubscribe();
  }

  public _routeChangeHandler = (params: Observable<Params>) => {
    // check params here
  }
}