Angular

Question

我有一个自定义输入字段作为子组件。我想传递一个函数给子组件，这个函数会修改子组件的值。问题是这个函数需要在父组件中声明。（这样子组件就通用了）

我的app.component.ts

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class AppComponent {
 title = 'app';

 capitalize(){
  console.log("capitalized called");
  // here i want to .toUpperCase() the child component's data
  // in this case, the text entered in the input-text component
 }
}

app.component.html

<app-input-text label="label from parent" required="true [onKeyUp]="capitalize" error-msg="Required">
</app-input-text>

输入-text.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
 selector: 'app-input-text',
 templateUrl: './input-text.component.html',
 styleUrls: ['./input-text.component.scss']
})
export class InputTextComponent implements OnInit {
 @Input('label') label: string;
 @Input('required') required: string;
 @Input('error-msg') errorMsg: string;
 @Input() onKeyUp: Function;

 constructor() {
 }
 ngOnInit(){
 }

输入-text.component.html

<div>
 <label> {{label}} </label>
</div>

<div>
 <input [(ngModel)]=inputData
  type="text"
  name="inputText"
  id="inputText"
  #inputText="ngModel"
  required="{{required}}"
  (keyup)="onKeyUp()"
 />

 <p *ngIf="inputText.errors && inputText.errors.required" class="display-message">
  {{errorMsg}}
 </p>

</div>

Answer 1

我不知道这个主意有多好，但是您可以使用 ViewChild 来访问子组件变量。对于 @Input，您需要绑定 this 以保持 this.

的正确范围

省略部分代码：

<app-input-text [KeyUp]="capitalize.bind(this)"></app-input-text>

TS

// import your child component and...
import { ViewChild } from '@angular/core';

// ...

@ViewChild(InputTextComponent) inputTextComponent: InputTextComponent

capitalize(){
  // here i want to .toUpperCase() the child component's data
  // in this case, the text entered in the input-text component
  this.inputTextComponent.inputData = 
       this.inputTextComponent.inputData.toUpperCase();;

}

和子组件：

inputData = '';
@Input() KeyUp: Function;

与您拥有的相同模板...

这是一个演示，其中包含一些与默认 StackBlitz 模板不同的组件名称:) https://stackblitz.com/edit/angular-xgfsk6?file=app%2Fapp.component.html

Answer 2

<app-input-text label="label from parent" required="true 
  (onKeyUp)="capitalize($event)" error-msg="Required">
</app-input-text>


export class InputTextComponent implements OnInit { 
  @Input('label') label: string;
  @Input('required') required: string;
  @Input('error-msg') errorMsg: string;
  @Output()
  onKeyUp: EventEmitter<any> = new EventEmitter<any>();

  constructor() {
  } 

  ngOnInit(){
  }

  onKeyUpClient() {
    this.onKeyUp.emit(true);
  }
}


<input [(ngModel)]=inputData type="text" name="inputText" 
   id="inputText"
   #inputText="ngModel"
   required="{{required}}"
   (keyup)="onKeyUpClient()" />

Answer 3

您可以使用@Input 绑定将父方法传递给子方法。 check it online

父组件

父inc方法在<child-comp [childInc]="inc"></child-comp>中传递给子<child-comp [childInc]="inc"></child-comp>，该函数将更新子count属性与this.count++。

@Component({
  selector: 'my-app',
  template: `
    <h1>Parent</h1>
    <child-comp [childInc]="inc"></child-comp>
  `
})
export class AppComponent {
  name = "I'm Parent";

  /**
   * This method will invoke by child component.
   * Make sure the child componnet has the count property!!
   */
  inc(){
    console.log(this.constructor.name);
    this.count++;
  }
}

子组件

@Input() childInc: () => void 定义为从父级接收函数。

@Component({
  selector: 'child-comp',
  template: `
  <h1>Child:</h1> 
  <p>Child counting: {{this.count}}</p>
  <button (click)="childInc()">Click me!</button>
  `
})
export class ChildComponent  {
  name = "I'm child"

  count = 0;

  @Input() childInc: () => void
}

Angular - 将父组件中的函数绑定到子组件

Angular - binding functions in parent to child component

binding

components

angular2-template

父组件

子组件