angular - 如何在子组件中构建通用（更改）函数以用于不同的父组件？角度 9

Question

我希望能够在子组件中构建一个“通用”（更改）函数，以用于具有不同行为的一个或多个父母。

我试图用@input 做一些事情，但问题是我必须直接将事件（更改）放在子模板中。如何将其放置在父模板中？

孩子

import { Component, Output, EventEmitter, Input } from "@angular/core";

@Component({
   selector: "select-state",
   template: `select  name=""  #selectstate >
                  <option selected > {{ selectStartMessage }}</option>
                   < option[value]="state.stateCode" * ngFor="let state of states" > {{ state.stateName }}</option>
              < /select>`,
   styleUrls: []
})

export class SelectState {


   @Input() callback: Function;

   constructor() { }
}

家长 1

<section class="container">
   <div class="row">
       <div class="col-11">
           <select-state (change)"FunctionParent1()"></select-state>
       </div>
   </div>
</section>

家长 2

<section class="container">
   <div class="row">
       <div class="col-11">
           <select-state (change)"FunctionParent2()"></select-state>
       </div>
   </div>
</section>

标签： angulartypescriptinputoutputangular9