asyncPipe 中的方法运行多次

Question

我将asyncPipe 与*ngIf 装饰器一起使用，该装饰器会自动订阅/取消订阅在<ng-container>...</ng-container> 中返回object 的Observable。

到目前为止一切顺利，但在ng-container 标记内，我想将object 作为参数传递给方法doSomething(object)。

问题是方法运行了5-8次？

HTML 模板

<ng-container *ngIf="(user$ | async) as user">
   {{  doSomething(user) }} <-- method executes multiple times
</ng-container

打字稿文件

class Component implements OnInit { 

    user: Observable<User>; 

    constructor() {}

    ngOnInit() {
        this.user$ = this.userService.getUser(id);
    }

    checkConfigs(object) {
        console.log(object);
    }
}

我已经测试过问题是否是 Observable 执行了多次，但它只运行了一次。然后认为ng-container 中的代码是问题所在，但这也运行一次。

这个问题与this 不同，因为我不是在问它是否可取，而是在问如何解决这个问题。在实践中，这应该有效。但是由于 Angulars changeDetection 架构，它不能像预期的那样与 Observables 一起工作，甚至在这篇文章中指出 things you didn't know about the AsyncPipe 如何使用 changeDetection: ChangeDetectionStrategy.OnPush 解决它。

Answer 1

您可以将组件 changeDetectionStrategy 更改为 onPush。之后，您的 doSomething 函数不会多次调用。所以基本上它会在检测到更改时调用该函数，这就是它多次调用的原因，所以在更改不会发生的检测技术之后

试试这个：

在你的组件中：

class Component implements OnInit { 
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush // this line
 })
}