如何调用另一个组件function？

Question

HomeComponent-component.ts

import { Router, NavigationExtras } from '@angular/router';

export class HomeComponent OnInit {
price;
 constructor(private router: Router) { }

  async onSubmit(customerData): Promise<any>{
     this.price = customerData.price //price = 2500
  }

  //This is the function help to send the data to another function
  test(){
    const navigationExtras: NavigationExtras = {state: {price: this.price }};
      this.router.navigate(['price-data'], navigationExtras);//this is going to /price-data component
  }
}

button.component.html

<span (click)="test()">Start</span></button>

现在，当我单击按钮时，我想调用homecomponent test() function。 两者都是不是父母或孩子的两个组成部分。 那么它是怎么做的呢？

Answer 1

您能显示包含按钮组件的 HTML 吗？

为此，按钮组件应具有 output 属性

@Output("buttonClicked") buttonClicked = new EventEmitter();

然后父母会像这样连接它：

<app-button>
(buttonClicked)='onButtonClicked()'
</app-button>

在父代码中会有这样的：

onButtonClicked(){
  //do something in parent component
}