如何在Angular中将值从父组件映射到子组件？答案

【问题标题】：How to Map values from parent to child component in Angular?如何在Angular中将值从父组件映射到子组件？
【发布时间】：2020-09-21 08:17:42
【问题描述】：

在父组件（app.component.html）中：-

<stl-app [filename]="'abc.STL'" [colorname]="'red'" [perspective]="35"></stl-app>

在父组件.ts(app.component.ts)中：-

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

  title = 'stl-app';
  @ViewChild(ImlStlAppComponent) child:ImlStlAppComponent;

  constructor(){}

  ngOnInit():void{}

  ngAfterViewInit(){
    this.child.mySubmit();
  }

在子组件（stl-app.component.html）中：-

<mat-form-field>
  <mat-label>Name of the file</mat-label>
  <mat-hint> File path of only stl file</mat-hint>
  <input  matInput  [(ngModel)]="filename"  name="filename"  required>
  </mat-form-field>

  <mat-form-field>
  <mat-label>Name of the color</mat-label>
  <mat-hint> Color in string</mat-hint>
  <input  matInput  [(ngModel)]="colorname" name="colorname"  required>
  </mat-form-field>

  <mat-form-field>
    <mat-label>Camera Perspective</mat-label>
    <mat-hint> values in Integer</mat-hint>
    <input  matInput  [(ngModel)]="perspective" name="perspective"  required>
    </mat-form-field>

<button  mat-raised-button (click)="mySubmit()"  color="primary">Submit</button>

在子component.ts（stl-app.component.ts）中：-

export class ImlStlAppComponent implements OnInit {


@Input()
filename:string;
@Input()
colorname:any;
@Input()
perspective:number;

mySubmit(){

//Something Todo----

}
}

当我点击“提交”按钮时，mySubmit() 方法不会被父 component.html 中已经给出的值触发，因此不会呈现任何内容。如何避免这个问题？

【问题讨论】：

能分享一下父组件的ts文件吗？
app.component.ts added..thats the parent component.ts---
您的代码应该可以工作。你可以尝试添加这个吗？我看看ngModel计时有没有问题。
你能删除这个吗？ ngAfterViewInit() {...}
好的..让我来做修改并给你一个快速的反馈！

标签： angular parent-child viewchild

【解决方案1】：

父母的 TS 代码

 @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { title = 'stl-app'; 
pFileName = 'somefilename';
pColorName = 'somecolorname';
pPerspective = 'someperspective';

@ViewChild(ImlStlAppComponent) child:ImlStlAppComponent; 
 constructor(){} ngOnInit():void{}       
 ngAfterViewInit(){ this.child.mySubmit(); }

父级HTML

<stl-app [filename]='pFileName' [colorname]='pColorName' [perspective]='pPerspective'></stl-app>

请让我知道它是否适合您。

【讨论】：