Событие Run / emitter от одного компонента к другому

Question

Я создал два компонента: (nav и app).

Внутри nav у меня есть функция getnumber(), которая при выполнении вычитает -1 из общего значения.

Есть ли способ выполнить эту функцию с помощью щелчка, но в компоненте приложения?

Я предполагаю, что при нажатии кнопки компонента приложения функция будет выполняться в компоненте nav, а значение обновлено .

Поскольку общее значение равно 5, при нажатии кнопки выполняется функция, и значение становится равным 4.

Может кто-нибудь помочь мне применить это?

Спасибо

DEMO

nav.ts

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

Nav. html

<p>
Nav
</p>

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

Answer 1

Вы можете вызывать методы publi c для другого компонента через ссылку на шаблон.

app.component. html

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

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

nav.component.ts

total = 5;

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

В примере HTML, #nav создает ссылку с именем nav на экземпляр NavComponent. Любые другие элементы в том же файле HTML теперь могут вызывать функции publi c для этого экземпляра.

DEMO: https://stackblitz.com/edit/angular-bw5jtp

Альтернативный подход

Вместо прямого вызова #nav в HTML, вы можете вызвать его из ваших component.ts. Используйте @ViewChild, чтобы получить ссылку на экземпляр компонента.

app.component.ts

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

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