如何通过@Input注解传递用户输入至Angular可复用组件并渲染？

我看了你的代码，发现几个关键问题导致父子组件没法正常建立通信，咱们一步步来修正：

1. 给AppComponent添加强双向绑定的属性 #

你的app.component.ts里没有定义和输入框绑定的变量，[(ngModel)]必须绑定组件类里的属性，不能直接写字符串或数字。咱们补上这些属性并初始化默认值：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'stl-app';
  // 定义用于双向绑定的属性，初始化默认值和你原来的硬编码一致
  filename = 'assets/base1.STL';
  colorname = 'red';
  perspective = 35;

  constructor(){}
  ngOnInit():void{}
}

2. 修正AppComponent模板的绑定逻辑 #

原来的可复用组件用的是硬编码值，现在要改成绑定上面定义的组件属性；同时输入框的[(ngModel)]也要绑定这些属性，而不是直接写字符串/数字：

<div> 
  <!-- 把硬编码值改成绑定组件类的属性 -->
  <app-reusable-component 
    [filename]="filename" 
    [colorname]="colorname" 
    [perspective]="perspective"> 
  </app-reusable-component> 
</div> 
<div class="stl"> 
  <mat-form-field> 
    <mat-label>Name of the file</mat-label> 
    <mat-hint> File path of only stl file</mat-hint> 
    <!-- 绑定到组件的filename属性 -->
    <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> 
    <!-- 绑定到组件的colorname属性 -->
    <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> 
    <!-- 绑定到组件的perspective属性，添加type="number"确保输入是数字类型 -->
    <input matInput [(ngModel)]="perspective" name="perspective" required type="number"> 
  </mat-form-field> 
</div>

3. 修正ReusableComponent的方法语法 #

TypeScript类里的方法不需要function关键字，直接定义即可，另外可以添加ngOnChanges监听输入属性变化：

import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-reusable-component',
  templateUrl: './reusable-component.html'
})
export class ReusableComponent implements OnInit, OnChanges { 
  @Input() filename!: string; 
  @Input() colorname!: any; 
  @Input() perspective!: number; 

  // 去掉function关键字，定义类方法
  doSomething() {
    // 这里可以用接收到的输入参数处理myCanvas逻辑，比如加载STL、设置颜色和视角
    console.log('当前参数：', this.filename, this.colorname, this.perspective);
    // 后续可以在这里操作#myCanvas元素，比如调用渲染逻辑
  }

  ngOnInit(): void {
    // 组件初始化时执行一次处理逻辑
    this.doSomething();
  }

  // 监听输入属性变化，参数更新时重新执行处理逻辑
  ngOnChanges(changes: SimpleChanges): void {
    this.doSomething();
  }
}

4. 别忘了导入FormsModule #

因为你用了[(ngModel)]双向绑定，必须在你的AppModule（或当前组件所属的模块）里导入FormsModule，否则绑定会失效：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入FormsModule
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

import { AppComponent } from './app.component';
import { ReusableComponent } from './reusable-component/reusable.component';

@NgModule({
  declarations: [
    AppComponent,
    ReusableComponent
  ],
  imports: [
    BrowserModule,
    FormsModule, // 添加到imports数组
    MatFormFieldModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

最后说明 #

这样调整后，用户在输入框里修改内容时，会实时同步到AppComponent的属性，然后通过@Input自动传递给ReusableComponent。你可以在doSomething方法里利用这些参数去操作myCanvas子组件，比如加载指定的STL文件、设置渲染颜色、调整相机视角等。

内容的提问来源于stack exchange，提问作者Jeet