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

Question

`ngAfterContentChecked() { console.log("内容已检查"); }

ngAfterViewChecked(){ console.log("查看检查"); }`

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

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

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

如果有其他可能的方法，请告诉我，这将对我有很大帮助，谢谢。

Answer 1

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

Working Demo

试试这样：

家长

.html

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

<hr>

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

.ts

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

子（页脚）：

.html

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

.ts

@Output() LinkClick = new EventEmitter();

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