组件之间的执行功能

Question

现在我开始学习Angular，我正在做一个简单的练习，但是我有一个很大的疑问。

我有两个组件（导航栏和应用程序），在导航栏中，我提供了一个向我返回值5的组件。在组件应用程序中，通过单击执行按钮，我希望在导航栏中显示的值为4（-1）。有没有办法做到这一点或使事件发射器按下应用程序组件上的EXECUTE按钮，从而在导航栏上执行一项使我将数字5减少到4的功能？]

谢谢！

DEMO

Navbar组件

total:any;
number = 5;

  constructor() { }

  ngOnInit() {
    this.GetNumber();
  }

  GetNumber(){
      this.total = this.number - 1;
  }

Answer 1

在您的情况下，“按钮”和组件位于同一.html中，并且位于同一<router-outlet></router-outlet>中，您只需要一个template reference variable

<app-navbar #navbar></app-navbar>

<p>My APP COMPONENT</p>
<button (click)="getNumber(navbar)">Execute Function</button>

您的getNumber函数可以访问导航栏的所有属性或函数，例如。

getNumber(navbar:any){
     navbar.getNumber()
     console.log(navbar.number)
  }

（*）注：我使用驼峰命名法对命名函数使用重新命名法，并且仅在定义类时在Capitalize中使用命名]

[如果使用服务，则需要在两个组件的构造函数中注入该服务，请参见interaction using a service。使用服务的想法是，一个组件调用一个发出值的服务方法，而另一个组件我们订阅到服务以获取发出的值，请参见SO answer

Answer 2

取决于您程序的结构

如果它们是同级组件（​​意味着它们是在相同的HTML中实例化的，在这种情况下，需要第三个组件），那么最好的方法是使用带有Observable的Service。

[如果存在父子关系（HTML中的一个组件实例，另一个实例），则可以使用EventEmitter或ViewChild