正确将值和调用函数从子级传递到父级组件,反之亦然

时间:2019-11-17 21:55:17

标签: input material-design angular7 dropdown function-call

我正在做一个 Angular 7材质 项目,我需要将一个值从Child component传递到一个Parent component,从选择下拉列表和输入框获得。我还想从父组件到子组件调用一个函数。

我尝试过的是@ViewChild(ChildComponent, {static: false}) child: ChildComponent将值从Child传递给Parent,然后 @ViewChild(ParentComponent, {static: false}) parent: ParentComponent从父级到子级调用一个函数,但没有成功。

我已经为此工作了一段时间,希望得到一些帮助。

下面是我的代码,我认为这可以澄清我的问题:

  

子组件

   <input #selectedValue type="text" name="selectedValue" placeholder="InputBox">

   <button mat-fab (click)="PassValue(selectedValue.value)">
       Click Button
    </button>

 // material drop down
    <mat-form-field>
        <mat-select (selectionChange)="onSelectParameter($event)" 
                    [(value)]="selectedParameter" [(ngModel)]="selectedParameter">
            <mat-option value="value1">Car</mat-option>
            <mat-option value="value2">Boat</mat-option>
            <mat-option value="value3">Train</mat-option>
          </mat-select>
      </mat-form-field>

  PassValue(selectedValue: string) {
      // I want to pass "selectedValue" from child to parent component
      // I want to call "testFunction()" from parent to child component
    }

  onSelectParameter(event) {
    //I want to pass "this.dropDownValue" from child to parent component
    if (event.value === 'value1') {
      this.dropDownValue = event.value;
    } else if (event.value === 'value2') {
      this.dropDownValue = event.value;
    } else if (event.value === 'value3') {
      this.dropDownValue = event.value;
    }
  }
  

父组件

//call "testFunction()" from parent to child component

testFunction() {
 //do stuff
}

0 个答案:

没有答案