Question

我有一个具有不同模态的组件，在每个模态中，我必须显示每个属性的信息，此信息在另一个组件中。我在对象向量中拥有该信息。从我阅读的内容中，我必须在组件（父子）之间使用绑定，我所怀疑的是如何将一个对象传递给其他组件然后显示其数据，我该怎么做？我必须声明一个对象类型为real @input，并且如何将整个对象从一个组件绑定到另一个组件？我要做的是在该组件的模板中显示该对象的值。

以下是我所拥有的样品：

我有这门课，我一直在讲：

export class Inmueble {
  nombre: string="";
  id: string="";
  baño: number=0;
  estacionamiento: number=0;
  metro: number=0;
  precio: number=0;
  fotos: string[]=[];

}

我将该类导入COMPONENT1，在其中通过对API的请求将其填充数据。我想要的是（在填充该对象之后）将其传递给COMPONENT2，我当时想的是在COMPONENT2中执行此操作：

import { Component, OnInit, Input } from '@angular/core';
import { Inmueble } from '../modelos/inmueble';

class {
  @Input vector: inmueble[];
}

但是我该如何处理从COMPONENT1到COMPONENT2填充的对象？在示例中，我看到它们是针对单个变量执行的，如下所示：[variable] =“ value”，但这将是一个向量，我认为逐行执行此操作并不重要。我要实现的目的是在COMPONENT2模板中显示该对象。预先感谢大家。问候！

编辑：

组件1：

import { Component, OnInit, Input} from '@angular/core';
import { Inmueble } from '../modelos/inmueble';

@Component({
  selector: 'app-modal',
  templateUrl: `<p>Model: {{prueba.nombre}} </p>`,
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit, Input {
  @Input() prueba: Inmueble;
  constructor() { }

  ngOnInit() {
  

  }




}

组件2：

 <app-modal [prueba]="inmuebles[0]" > </app-modal>

我分配不动产[0]，因为在此组件中，我具有一系列属性，因此从理论上讲，我将向一个属性分配一个属性。

向我显示此错误：

ERROR in ./src/app/modal/modal.component.ts
Module not found: Error: Can't resolve './<p>Model: {{prueba.nombre}} </p>' in '/home/julian/Seaconfiable/src/app/modal'

Answer 1

如果我正确理解它，则需要跨组件传递复杂的数据对象。

您可以使用property binding作为父项@Input的属性，从父项到子项轻松地执行此操作

 @Input() vector: inmueble[];

在https://stackblitz.com/edit/angular-object-passing-between-components创建的示例

如何将对象从一个组件以角度

1 个答案: