如何将 parent 中的值映射到 Angular 中的 child 组件?
How to Map values from parent to child component in Angular?
在parent组件中(app.component.html):-
<stl-app [filename]="'abc.STL'" [colorname]="'red'" [perspective]="35"></stl-app>
在parent component.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();
}
在child组件中(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>
在child component.ts (stl-app.component.ts):-
export class ImlStlAppComponent implements OnInit {
@Input()
filename:string;
@Input()
colorname:any;
@Input()
perspective:number;
mySubmit(){
//Something Todo----
}
}
当我单击 "Submit" 按钮时,mySubmit() 方法不会使用 parent component.html 中已经给出的值触发,因此不会呈现任何内容。如何避免这个问题?
parent
的 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 对于 parent
<stl-app [filename]='pFileName' [colorname]='pColorName' [perspective]='pPerspective'></stl-app>
请告诉我它是否适合你。
在parent组件中(app.component.html):-
<stl-app [filename]="'abc.STL'" [colorname]="'red'" [perspective]="35"></stl-app>
在parent component.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();
}
在child组件中(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>
在child component.ts (stl-app.component.ts):-
export class ImlStlAppComponent implements OnInit {
@Input()
filename:string;
@Input()
colorname:any;
@Input()
perspective:number;
mySubmit(){
//Something Todo----
}
}
当我单击 "Submit" 按钮时,mySubmit() 方法不会使用 parent component.html 中已经给出的值触发,因此不会呈现任何内容。如何避免这个问题?
parent
的 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 对于 parent
<stl-app [filename]='pFileName' [colorname]='pColorName' [perspective]='pPerspective'></stl-app>
请告诉我它是否适合你。