-1

在我的 Angular 11 项目中，我有一个 Observable，它改变了视图并在渲染时需要一些时间。

像这样的东西：

export class MyComponent implements OnInit {
  myObservable = of([1, 2, 3]);

  constructor() { }

  ngOnInit(): void {
    this.myObservable.pipe(
      // here is some functions
    ).subscribe();
  }

}

运行后ngOnInitobservable 仍在运行和处理数据。数据到达后，管道更改模板。但是这种变化发生在ngAfterViewInit完成之后。所以我需要一个在管道之后运行的灵魂，并且渲染完成了正在发生的事情，因为管道完成了。

在我的可观察对象和导致的渲染完成后，如何运行代码（工具提示初始化）？

这ngAfterViewChecked不是一个好的解决方案，因为它总是在视图更改时运行，而且我的工具提示初始化也会更改视图。所以我只想运行一次这个初始化。

有什么解决办法吗？

4

3 回答 3

0

您可以使用async管道轻松处理来自 Observables 的数据，如果您需要使用 RxJSpipe函数，您可以将生成的 Observable 保存到一个新变量中，然后async在其上使用管道。

检查这个 stackblitz 例子

否则，如果管道中的副作用非常复杂，您可以使用ChangeDetectorRef. 在此处查看其文档。

于 2021-06-28T20:08:46.647 回答
0

您可以使用 timout 函数作为解决方法，该页面将在管道后加载并在一秒钟后执行您的代码，您可以将其减少到不到一秒钟，您可以通过尝试确定它：

export class MyComponent implements OnInit {
  myObservable = of([1, 2, 3]);
  constructor() { }

  ngOnInit(): void {
    this.myObservable.pipe(
      setTimeout( ()=>{
   // your code here
   }, 1000)
    ).subscribe();
  }

}
于 2021-06-28T22:51:32.337 回答
0

我找到了一种解决方法：

我将所有代码放入一个单独的组件中，该组件连接到工具提示。实际上它是一个label带有信息图标的。在这个组件中，我将工具提示初始化代码放入ngAfterViewInit函数中：

import { AfterViewInit, Component, Input } from '@angular/core';
import { TooltipService } from 'src/app/services/tooltip/tooltip.service';

@Component({
  selector: 'app-wizzard-label',
  templateUrl: './wizzard-label.component.html',
  styleUrls: ['./wizzard-label.component.scss'],
})
export class WizzardLabelComponent implements AfterViewInit {
  @Input() field: any = {};

  constructor(
    private tooltipService: TooltipService,
  ) { }

  ngAfterViewInit(): void {
    this.tooltipService.init();
  }
}

现在，当 observable 完成时，消失我的微调器并显示这个组件。做自己的ngAfterViewInit工作，一切正常。

于 2021-06-29T12:36:46.290 回答