时间戳

首页 > 解决方案 > 从一个组件运行/发射器事件到另一个组件

angular - 从一个组件运行/发射器事件到另一个组件

问题描述

我创建了两个组件：（nav和app）。

在导航中，我有一个函数getnumber()，它在执行时从总值中减去 -1。

有没有办法通过点击但在应用程序组件中执行此功能？

我打算单击应用程序组件的按钮时，该功能将在nav组件中执行并更新值。

由于总值为 5，当点击按钮时，函数被执行，值变为 4。

谁能帮我申请这个？

谢谢

演示

导航

getnumber(){
  this.total = this.total - 1;
}

导航.html

<p>
Nav
</p>

<p>
Total: {{total}}
</p>

标签： angulartypescript

解决方案

您可以通过模板引用在另一个组件上调用公共方法。

app.component.html

<app-nav #nav></app-nav>

<button (click)="nav.decrement()">
  Execute decrement() nav component
</button>

导航组件.ts

total = 5;

decrement() {
  this.total = this.total - 1;
}

在 HTML 示例中，#nav正在创建nav对NavComponent实例的引用。同一个 HTML 文件中的任何其他元素现在都可以调用该实例上的公共函数。

演示：https ://stackblitz.com/edit/angular-bw5jtp

替代方法

#nav您可以从您的 component.ts 中调用它，而不是直接在 HTML 中调用。用于@ViewChild获取对组件实例的引用。

app.component.ts

@ViewChild('nav', { static: true }) nav: NavComponent;

onClick(): void {
  this.nav.decrement();
}

推荐阅读