Angular 10-使用订阅时，AfterViewInit中执行的更改顺序

编程问答 2022-08-16

问题描述

我有这个ngAfterViewInit生命周期挂钩：

ngAfterViewInit() {
    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);

    this.subscription = this.dataService.dataChanged
      .subscribe(
        () => {
          this.getData();
        }
      );

    this.getData();
  }

我希望订阅在订阅之外的this.getData()之前运行，并且只有在未发生订阅的情况下，我希望订阅之外的this.getData()才能运行。

我该如何实现？将其放在ngOnInit中不起作用，因为这是一个分页的表，并且仅在页面呈现后才起作用。当用户将新数据添加到表中并希望其自动可见时，我需要进行订阅。

已编辑 如果我像上面编写的那样运行代码，则在第一次导航到页面时，我的数据已从服务器正确加载到我的分页表中。然后，用户可以使用另一个组件中的表单添加新的数据项。当用户完成添加新项目时，他们将导航回到该表。现在的样子，该表首先加载而不添加新的内容，然后再使用新添加的内容重新加载。我想做的是使第一次加载对用户不可见-以便在向后导航时，他们可以立即看到正确的数据。

解决方法

由于订阅是异步，因此您需要更改代码流。

 private callGetData: boolean

 ngAfterViewInit() {

    this.callGetData = true;

    this.sort.sortChange.subscribe(() => {
       this.paginator.pageIndex = 0;
       if(this.callGetData) this.getData();
       this.callGetData = false;
    })

    this.subscription = this.dataService.dataChanged
      .subscribe(
        () => {
          this.getData();
        }
      );
  }

这样，仅在getData()执行之后，您才会调用ngAfterViewInit()，而不是每次订阅都收到事件。

，或者如果您也想在订阅中getData()，也可以删除该标志。

希望它能起作用！

angularangular-materialangular10subscriptiontypescripttypescript