如果我不必像 ngAfterContentChecked() 和 ngAfterViewChecked() 调用那样多次调用语句怎么办

Question

`ngAfterContentChecked() { console.log("Content checked"); }

ngAfterViewChecked(){ console.log("View checked"); }`

我正在 Angular 做一个项目。我需要在一个页面中调用一个语句块两次 - 1. 当我单击同一组件中的选项卡时。 2. 当我点击页脚（一个不同的子组件）中的 link 时，我可以在同一页面上看到这些按钮和 link。

用于在单击按钮和页脚中的 link 时调用这些语句，其中语句仅在一个父项中定义。要检查来自另一个组件（页脚）的任何更新（单击），我需要使用 ngAfterContentChecked() 或 ngAfterViewChecked() ，这又运行多次（大约在组件初始化后的每一秒），这对我需要运行它仅在单击页脚上的 link 和单击父项中的按钮时。

我只需要运行它 4 次（点击父选项卡 2 次，点击页脚中的 links 两次）但这两个生命周期在控制台中给我结果超过 100 次，这不是同时使用这两个生命周期的正确方法。

请告诉我是否有任何其他可能的方法，这将对我有很大帮助，谢谢。

Answer 1

您可以简单地在 (click) 事件中绑定一个函数。

Working Demo

这样试试：

Parent

.html

<button (click)="onClick()">Tab1</button>
<button (click)="onClick()">Tab2</button>

<hr>

<app-child (LinkClick)="onClick()"></app-child>

.ts

onClick(){
  console.log("Clicked");
}

Child（页脚）:

.html

<a (click)="linkClick()" href="#">Link 1</a>

.ts

@Output() LinkClick = new EventEmitter();

linkClick() {
  this.LinkClick.emit();
}

如果我不必像 ngAfterContentChecked() 和 ngAfterViewChecked() 调用那样多次调用语句怎么办

What if I don't have to call a statement as many times as ngAfterContentChecked() and ngAfterViewChecked() call

angular

angular-lifecycle-hooks