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

Question

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

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

有没有一种方法可以通过点击但在应用程序组件中执行此功能？

我希望当点击应用程序组件的按钮时，该功能将在nav组件中执行，并更新值。

由于总值为5，当单击按钮时，将执行该功能，并且该值变为4。

有人能帮我涂这个吗？

感谢

演示

导航

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

Nav.html

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

Answer 1

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

app.component.html

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

nav.com组件.ts

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

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

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

替代方法

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

app.component.ts

@ViewChild('nav', { static: true }) nav: NavComponent;
onClick(): void {
this.nav.decrement();
}