angular 12 子组件如何将输入值传递给父组件？答案

【问题标题】：How does angular 12 child component pass input value to parent component？angular 12 子组件如何将输入值传递给父组件？
【发布时间】：2021-09-20 21:05:39
【问题描述】：

child.html

<p>
  <mat-form-field appearance="outline">
    <mat-label>Password</mat-label>
    <input matInput required [type]="show ? 'password' : 'text'" class="input">
    <button mat-icon-button matSuffix (click)="show = !show" [attr.aria-label]="'Hide password'"
            [attr.aria-pressed]="show">
      <mat-icon matSuffix>{{show ? 'visibility_off' : 'visibility'}}</mat-icon>
    </button>
  </mat-form-field>
</p>

parent.html

  <password></password>

不使用[(ngModel)]如何获取组件password的值？

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

您可以使用事件发射器将数据从父组件传递到子组件。

父.html

父.ts

onGetValue(password: string) {
    console.log('password::' + password);
}

child.html

child.ts

@Output() getValue: EventEmitter<string> = new EventEmitter();
onKeyupPassword(value: string) {
    this.getValue.emit(value);
}

【讨论】：

【解决方案2】：

在孩子中获取价值：

HTML 中的本地引用：

<input #childPassword matInput required [type]="show ? 'password' : 'text'" class="input">

在 TS 中获取该本地引用的值：

@ViewChild(‘childPassword’) childPassword!:ElementRef<HTMLInputElement>
...
Const onChildPasswordValue = this.childPassword.nativeElement.value;

将孩子的价值发送给父母：

import { ..., EventEmitter, ..., Output } from '@angular/core'; 
....
  @Output() onNewChildPassword: EventEmitter<string> 
  = new EventEmitter();
....
    this.onNewChildPassword.emit(onChildPasswordValue);

在父项中获取价值：

父.html

<password (onChildPasswordValue)="parentMethodGetPassword($event)"></password>

父.ts

public parentMethodGetPassword(password: string) {

// in password you will have the child password

}

【讨论】：

【解决方案3】：

您可以尝试以下方法：

在Parent 组件打字稿中，您必须创建一个方法来接收password 变量的值，如下所示：

export class ParentComponent {

password:string;

constructor() { } 

receiveStringValue($event) {
  this.password= $event;
 }
}

在Parent 组件 html 中放入以下内容：

<app-child (stringValueEvent)="receiveStringValue($event)"></app-child>
<h1>{{password}}<h1>

在Child 组件 html 中放入以下内容：

<input type="password" (keyup)="onKeyupPassword(value)"/>

在Child 组件打字稿（app-child 选择器）中，您应该使用@Output() 装饰器声明一个stringValueEvent 变量，并将其设置为一个新的事件发射器。

export class ChildComponent {

  password:string;

  @Output() stringValueEvent = new EventEmitter<string>();

  constructor() { }

  onKeyupPassword(value: string) {
    this.password = value;
    this.stringValueEvent.emit(this.password)
  }

  ngOnInit(): void {
    
  }
}

【讨论】：

【解决方案4】：

解决了

username.component.html
<p>
  <mat-form-field appearance="outline">
    <mat-label>Username</mat-label>
    <input matInput required type="text" class="input"
           [(ngModel)]="value" (keyup)="newUsername(value)">
    <button mat-icon-button matSuffix disabled>
      <mat-icon matSuffix>account_circle</mat-icon>
    </button>
  </mat-form-field>
</p>

username.compoment.ts
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'username',
  templateUrl: './username.component.html',
  styleUrls: ['./username.component.scss']
})
export class UsernameComponent implements OnInit {

  constructor() {
  }

  ngOnInit(): void {
  }

  value: string = '';

  @Output() username: EventEmitter<string> = new EventEmitter();

  newUsername(value: string) {
    this.username.emit(value);
  }
}

signin.component.html
<app-header></app-header>
<form>
  <username (username)="username($event)"></username>
  <password (password)="password($event)"></password>
  <p class="button signin">
    <button mat-raised-button color="primary" type="button"
            (click)="onSubmit()" (keyup.enter)="onSubmit()">Sign in
    </button>
  </p>
</form>
<app-footer></app-footer>

signin.compoment.ts
import { Component, OnInit } from '@angular/core';
import { SigninService } from './signin.service';
import { Signin } from './signin';

@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.scss']
})
export class SigninComponent implements OnInit {

  constructor(
    private service: SigninService
  ) {
  }

  ngOnInit(): void {
  }

  signin: Signin = {
    username: '',
    password: ''
  };

  username(value: string) {
    this.signin.username = value;
  }

  password(value: string) {
    this.signin.password = value;
  }

  onSubmit() {
    return this.service.post(this.signin);
  }

}

【讨论】：