两个组件之间的 ng 类激活问题答案

【问题标题】：Problem with ng class activate between two components两个组件之间的 ng 类激活问题
【发布时间】：2020-02-20 18:11:29
【问题描述】：

你好，我想通过带有Output()的submit-area.component.ts访问app.component.ts中的onClick()函数来控制ng类的激活。

用例：

用户点击第二个按钮，点击提交后，他会自动进入按钮第一。

你能帮帮我吗？

我在 StackBlitz 中创建了我的代码

https://stackblitz.com/edit/angular-lgzgn4

【问题讨论】：

标签： angular events output angular-components eventemitter

【解决方案1】：

我分叉了您的stackblitz，并确保在单击提交按钮后选择了按钮 2：

在提交按钮上添加一个点击事件并发出您的事件发射器。
在 application.component.html 中将提交组件的 onClick 事件绑定到您的提交函数。

【讨论】：

【解决方案2】：

子（提交组件）：html

<button (click)="submit()">Submit</button>

child(submit component):ts 在这里我们将通过@output 向父级发送我们的事件

@Output() valueChange = new EventEmitter();

      constructor() { }

      ngOnInit() {
      }

      public submit() {
        this.valueChange.emit();
      }

在父 html（按钮组件）中，我们将为子事件分配一个函数，比如说 display()

<app-submit-area #component1 (valueChange)='display($event)' ></app-submit-area>

并在您的 ts 中处理 display() 函数

display(){
/// your logic
 }

我为你创建了一个stackblitz。希望这能解决你的问题

【讨论】：