如何調用另一個組件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
}