如何使用 @Input 注释将值传递给可重用组件？答案

【问题标题】：How to pass the values to a reusable component using the @Input annotation?如何使用 @Input 注释将值传递给可重用组件？
【发布时间】：2020-06-29 08:39:52
【问题描述】：

我想从 app.component 获取用户输入并将这些参数传递给 ReusableComponent，处理该输入并显示结果。我在可重用组件中有一个子组件，称为“mycanvas”。

在父app.component.html中：

<div>
<app-reusable-component [filename]="'assets/base1.STL'" [colorname]="'red'" [perspective]="35">
</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>
  <input  matInput  [(ngModel)]="assets/base1.STL"  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)]="red" 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)]="35" name="perspective"  required>
    </mat-form-field>
  </div>

在app.component.ts中，我已经导入了ReusableComponent：

import { Component, OnInit, ViewChild, Renderer2 } from '@angular/core';
import {ImlStlAppComponent} from 'src/app/iml-stl-app/iml-stl-app.component';


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

  title = 'stl-app';

  constructor(){}

  ngOnInit():void{}
}

我想将此参数作为用户输入传递给可重用组件并接受带有@Input 注解的组件：

export class ReusableComponent implements OnInit {


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

function doSomething(){}
}

在 ResuableComponent.html 我有：

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

我认为我无法在可重用组件和应用程序组件之间建立通信，因此没有显示任何内容。有人可以指导我吗？

【问题讨论】：

标签： angular input parent-child

【解决方案1】：

首先，您应该为输入创建模型。例如在您的组件中：

export class AppComponent implements OnInit  {
  filename: string;
  colorname: string;
  perspective: string;

然后您可以将此变量用作输入中的模型并发送到您的自定义组件。

<app-reusable-component [filename]="filename" [colorname]="colorname" [perspective]="perspective">

并更改您的输入：

<input  matInput  [(ngModel)]="filename"  name="filename"  required>
<input  matInput  [(ngModel)]="colorname" name="colorname"  required>
<input  matInput  [(ngModel)]="perspective" name="perspective"  required>

如果你需要初始值，你可以用它来初始化你的模型变量。

【讨论】：

【解决方案2】：

您可以通过App.Component 传递它，如下所示。

在App.Component中定义变量

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

  title = 'stl-app';
  fileName="file.hgt";
  color="blue";
  constructor(){}

  ngOnInit():void{}
}

在 app.component.html 中，使用 ReusableComponent 如下

<app-resuable-component [filename]="fileName" [colorname]="color">

</app-resuable-component>

【讨论】：