我正在尝试在父组件中以表单形式提供输入。我希望这些输入使用@input显示在子组件中。如何做到这一点？
loginform.html(父级(:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="form">
<h2 id="registration">Login Form</h2>
<form (ngSubmit)="navToDisplayForm()" #f="ngForm">
<div>
<label for="firstname">First Name</label>
<input type="text" id="firstname" placeholder="Your name.." name="firstname"
[(ngModel)]='userModel.firstnamedetail' required>
<label for="middlename">Midddle Name</label>
<br>
<input type="text" id="middlename" placeholder="Your middlename.." name="middlename"
[(ngModel)]='userModel.middlenamedetail' required>
<br>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" placeholder="Your lastname.." name="lastname"
[(ngModel)]='userModel.lastnamedetail' required>
</div>
<br><br>
<button class="btn btn-info" type="submit" routerLink="/userdata" (click)="navToDisplayForm()"
value="Submit" id="btn">Submit</button>
<p>Not Regestered? <span>Create Account</span></p>
</form>
</div>
</body>
<app-userdata [childData]="sendToChild"></app-userdata>
</html>
loginform.ts(父级(：
import { Component, OnInit } from '@angular/core';
import { NgForm } from "@angular/forms";
import { Router } from '@angular/router';
@Component({
selector: 'app-loginform',
templateUrl: './loginform.component.html',
styleUrls: ['./loginform.component.css']
})
export class LoginformComponent implements OnInit {
userModel = {
firstnamedetail: '',
middlenamedetail: '',
lastnamedetail: ''
}
sendToChild: any;
constructor(
private route: Router
) { }
ngOnInit(): void {
}
onSubmit() {
}
navToDisplayForm() {
this.sendToChild = this.userModel;
//this.route.navigate(['/userdata'])
}
}
userdata.ts(子级(:
import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";
@Component({
selector: 'app-userdata',
templateUrl: './userdata.component.html',
styleUrls: ['./userdata.component.css']
})
export class UserdataComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private router: Router
) { }
@Input() childData: any = {
firstnameToDisplay: '',
middlenameToDisplay: '',
lastnameToDisplay: ''
};
ngOnInit(): void {
}
}
userdata.html(子级(:
<div>
<form class="display">
<p>First Name: {{childData.firstnameToDisplay}}</p>
<p> Middle Name: {{childData.middlenameToDisplay}}</p>
<p>Last Name :{{childData.lastnameToDisplay}}</p>
</div> -->
</form>
</div>
这里的问题是，您实际上绑定了错误的数据——您将数据作为firstnamedetail发送，并试图将其用作firstnameToDisplay绑定，但无法像这样工作。您可以使用@Input((childData:any更新userData.ts中的绑定；以及您的userData.html。
<div>
<form class="display">
<p>First Name: {{ childData?.firstnamedetail ?? '' }}</p>
<p>Middle Name: {{ childData?.middlenamedetail ?? '' }}</p>
<p>Last Name :{{ childData?.lastnamedetail ?? '' }}</p>
</form>
</div>在这里？。被称为可选链接，在childData.properties未定义的情况下和在未定义的？？(Nullish合并运算符(将显示空字符串。