Question

我正在将值从一个组件传递到另一个：

paquete-detalle.component.ts

Finnish_Swedish_CI_AS

paquete-detalle.component.html

nombre: string;
precio: number;

ngOnInit() {
const id = this.activatedRoute.snapshot.paramMap.get('id');
  this.fs.getPaqueteObject(id).valueChanges().subscribe(paquete => {
    this.nombre = paquete.nombre;
    this.precio = paquete.precio;
  });
}

然后在 reserva.component.ts 中，我具有以下内容：

{{nombre}} {{precio}} //All good with these values, if they are printed.
<app-reserva [precio]="precio" [nombre]="nombre"></app-reserva>

这是我尝试以反应形式保存它的地方，但是由于@Input() precio: number; @Input() nombre: string; constructor( private fs: FirebaseService, private fb: FormBuilder, ) { this.forma = fb.group ({ nombre: [ this.nombre ], precio: [ this.precio ], }); } ngOnInit() { console.log(this.precio, this.nombre); }和null的结果，我得到undefined（在控制台中为this.price）。 / p>

但是，在 reserva.component.html 中是否打印了值：

this.name

在组件之间传递值的正确方法是什么？

Answer 1

您的组件初始化逻辑应存在于ngOnInit().中，因为您的父组件在其自己的ngOnInit()中具有一些异步逻辑，因此您将要阻止创建app-reserva组件，直到您拥有您需要的所有数据。

paquete-detalle.component.ts

nombre: string = null;
precio: number = null;

ngOnInit() {
const id = this.activatedRoute.snapshot.paramMap.get('id');
  this.fs.getPaqueteObject(id).valueChanges().subscribe(paquete => {
    this.nombre = paquete.nombre;
    this.precio = paquete.precio;
  });
}

paquete-detalle.component.html

{{nombre}} {{precio}} //All good with these values, if they are printed.
<app-reserva *ngIf="precio && nombre" [precio]="precio" [nombre]="nombre"></app-reserva>

reserva.component.ts

@Input() precio: number;
@Input() nombre: string;

constructor( private fs: FirebaseService, private fb: FormBuilder, ) {
}

ngOnInit() {
  this.forma = fb.group ({
    nombre: [ this.nombre ],
    precio: [ this.precio ],
  });
  console.log(this.precio, this.nombre);
}

This answer here很好地解释了constructor和ngOnInit之间的区别。

您的子组件仍在初始化一个空表格的原因是，您的子组件是在父组件完成执行this.fs.getPaqueteObject(id).valueChanges().subscribe()中的回调之前创建的。使用这种方法，您的reserva.component.ts将不会呈现，直到您的父组件完成获取孩子所需的所有数据为止。

这只是一种方法，您还可以查看OnChanges来使您的子组件在@Input()值更改时做出反应，或者通过Resolvers在组件加载之前将数据加载到路由中

Answer 2

由Input（）传递的值在构造函数中不可用，因为它们尚未传递给子级。考虑使用ngOnInit（）方法构建表单，您应该一切顺利！

Answer 3

Stackblitz-https://stackblitz.com/edit/angular-9d3bu4-so-56527061

在使用precio时，确保父母已经定义了您要传递的nombre和<app-reserva [precio]="precio" [nombre]="nombre"></app-reserva>（通过一种方式绑定）

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  precio = 24.50;
  nombre = "boots"
}

app.component.html

<app-reserva [precio]="precio" [nombre]="nombre"></app-reserva>

Answer 4

尝试从组件中删除括号，并使用插值语法{{}}：

<app-reserva precio="{{precio}}" nombre="{{nombre}}"></app-reserva>

https://stackblitz.com/edit/angular-jwhf87?file=src%2Fapp%2Fapp.component.html

@Input（）在组件之间传递空值

4 个答案: