Question

`ngAfterContentChecked（）{ console.log（“内容已检查”）; }

ngAfterViewChecked（）{ console.log（“查看已检查”）; }`

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

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

我只需要运行4次（两次单击父级选项卡，两次单击页脚中的链接），但是这两个生命周期使我在控制台中获得的结果超过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();
}

如果我不必多次调用ngAfterContentChecked（）和ngAfterViewChecked（）调用该怎么办？

1 个答案: