0

我有一个父组件和一个可重用的子组件。我想在不使用任何提交按钮的情况下触发子组件中的值并在父组件中的输入更改时显示结果。每当输入值发生任何变化时，我都想调用具有更新值的子组件或可重用组件的 mySubmit() 函数，因为它负责渲染图形。

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

*export class AppComponent implements OnInit  {

  title = 'stl-app';
  filename:string=""abc;
  colorname:string ='red';
  perspective:string='35';

  @ViewChild(reusableAppComponent) child:reusableAppComponent;

  constructor(){}

  ngOnInit():void{

  }

  ngOnChanges(changes:SimpleChanges){
        this.child.mySubmit();
  }

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

   changedcolor(ev :Event){

    let c=(<HTMLSelectElement>ev.target).value;
    console.log("Hello" + c);
    this.colorname=c;
    this.child.mySubmit();

  } 
}*

在父 component.html 文件 (appcomponent.html) 中：-

*

<div>
<reusable-app [filename]= "filename" [colorname] = "colorname" [perspective]= "perspective"></reusable-app>
</div>
<div class="stl" style="position:absolute; right:500px;">
<mat-form-field style="width:600px">
  <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>
<br><br>
  <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>
    <br><br>
    <mat-form-field>
      <mat-label>Select a Color</mat-label>
      <mat-select (change) ="changedcolor($event) [(ngModel)]="colorname" name="colorname" required>
        <mat-option>None</mat-option>
        <mat-option value="red">red</mat-option>
        <mat-option value="blue">blue</mat-option>
        <mat-option value="orange">orange</mat-option>
        </mat-select>
    </mat-form-field>
  </div>

在子 component.ts (Reusableappcomponent.ts) 中：-

*export class ReusableAppComponent implements OnInit {
  
@Input()
filename:string;
@Input()
colorname:any;
@Input()
perspective:number;

private scene: Scene;
private camera: PerspectiveCamera;
private renderer: WebGLRenderer;
@ViewChild("myCanvas") myCanvas:any;

  constructor(private service:ImlStlAppService,private render:Renderer2,private http: HttpClient,private sanitizer: DomSanitizer) {
   }

  ngOnInit(): void {
     //add listener for the resize of the window - will resize the renderer to fit the window
     let global = this.render.listen('window', 'resize', (evt) => {
      this.onWindowResize();
    })
  }
  mySubmit(){

//Render using the input parameters

}

}*

在子 component.html (ReusableComponent.html) 中：

*<div style="text-align:center">
<canvas #myCanvas id="myCanvas">
</canvas>
</div>*

我很困惑为什么当我更改输入中的值时渲染没有改变。

4

2 回答 2

2

您正在寻找的是父组件和子组件之间的反应式通信。有多种方法可以做到这一点。不相关组件之间的常用方法是使用单例服务。

但是由于您已经与组件有兄弟关系，您可以将@Input装饰器附加到 setter 而不是成员变量。每当父组件中的相应变量发生更改时，这都会触发 setter。

尝试以下

父控制器

export class AppComponent implements OnInit {
  title = 'stl-app';
  filename: string = ""
  abc;
  colorname: string = 'red';
  perspective: string = '35';

  constructor() { }

  ngOnInit(): void { }

  changedcolor(ev: Event) {
    let c = ( < HTMLSelectElement > ev.target).value;
    console.log("Hello" + c);
    this.colorname = c;
    this.child.mySubmit();
  }
}

子控制器

export class ReusableAppComponent implements OnInit {
  _filename: string;
  @Input() colorname: any;
  @Input() perspective: number;

  @Input() 
  public set filename(name: string) {
    this._filename = name;
    this.mySubmit();           // <-- trigger the call here
  }

  private scene: Scene;
  private camera: PerspectiveCamera;
  private renderer: WebGLRenderer;
  @ViewChild("myCanvas") myCanvas: any;

  constructor(private service: ImlStlAppService, private render: Renderer2, private http: HttpClient, private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    //add listener for the resize of the window - will resize the renderer to fit the window
    let global = this.render.listen('window', 'resize', (evt) => {
      this.onWindowResize();
    })
  }

  mySubmit() {
    //Render using the input parameters
  }
}

我只将filename输入设置为设置器，因为这似乎是您感兴趣的内容。但是，如果您希望触发mySubmit()任何输入变量的更改，则可以将它们中的每一个设置为设置器。

于 2020-07-31T13:40:40.477 回答
0

你可以 ngOnChanges(changes:SimpleChanges){ this.mySubmit(); } 在子组件中做。记得写 ReusableAppComponent 实现 OnChanges

于 2020-07-31T13:48:02.103 回答