如何将对象从一个组件传递到另一个组件

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创建的示例