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

Question

我刚刚开始潜入Angular 1.5来自Angular 1.5.我正在处理用户路由并将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
        });
    }
}

更新:

找到了一个我觉得最适合我的方案的解决方案.根据我的问题和进一步调查的几个答案和评论,订阅路线似乎是要走的路.这是我更新的组件:

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？问题就讲到这里。我找到了一个更好的解决方案在这里。我自己还没有测试过，但这应该有效。

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

ngOnInit 仅对更改检测进行操作，而 GET 更改似乎不会触发它，这让我感到惊讶。

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