Question

我有一个带有一堆单独的Input（）属性的子组件。我希望能够通过一个对象轻松地从父级传递这些输入属性-有没有单独传递属性的方法？我想要这样的东西：

子component.ts文件

export class ChildComponent{
  Input() text:string;
  Input() name:string;
  Input() width:number;

父component.html文件

<child-component
    {{inputProperties}}
>
</child-component>

父component.ts文件

export class ParentComponent{
   inputProperties: {text: "hello", name: "world", width: 5}
}

这样做是改变子组件以接受属性对象的唯一方法吗？

Answer 1

除非您在子组件上有很多输入，否则我认为不需要这样做。但是如果您愿意，可以按照此方法轻松实现

子组件

export class ChildComponent implements onChanges{
  Input() props: object;

  private text:string;
  private name:string;
  private width:number;

  constructor() {}

  ngOnChanges() {
    this.text = props.text;
    this.name = props.name;
    this.width = props.width
  }

Answer 2

尝试类似的事情：

export class ChildComponent{
  Input() obj:any;

....

 <child-component
    [obj]="inputProperties"
>
</child-component>

Answer 3

我认为您想将数据对象从父组件传递到子组件。为此，您可以尝试以下代码。

父component.ts文件 export class ParentComponent{ public inputProperties: {text: "hello", name: "world", width: 5} }

父component.html文件

<child-component [inputProps] = "inputProperties"> </child-component>

这称为数据绑定。

child componet.ts文件

export class ChildComponent{ @Input() inputProps: any; }

在一个对象中传递多个Input属性？

3 个答案: