在Angular 5中将模型从一个组件传递到另一个组件

Question

问题

我正在使用angular 5 for SPA。我有2个组件父子。我从Parent组件调用了API，并将该API的响应转换为Model。现在我想将该模型传递给其他组件。 我已经使用@Input来获取模型，但它在视图中呈现但没有捕获到组件中。当我在console.log中传递它的模型时，显示我未定义。

代码

<app-quote-details [getSpecDetails]="getSpecDetails"></app-quote-details>

父视图

import {Component, Inject, OnInit, Input} from '@angular/core';
import {SpecDetailsComp} from "./SpecDetailsComp";
import {MAT_DIALOG_DATA, MatDialog} from "@angular/material";

@Component({
    selector: 'app-quote-details',
    templateUrl: '../views/quote-details.html',
    styleUrls: ['../../assets/css/component.css'],
})

export class QuoteDetailsDialogComp {

   //this is the model i wanna pass to other component with data init
    @Input() getSpecDetails: Array<SpecDetailsModel>;

    constructor() {
        console.log(this.message);
    }
}

子组件

    A   B   C  D E  F G
1   A   G   1    A  G
2   B   H   2    C  I
3   C   I   3    D  K
4   D   K   4           
5   E   L   5           
6   F   M   6           

Answer 1

将*ngIf="getSpecDetails"添加到您的子组件。

在您收到服务器响应之前，您的子组件init正在发生。

当您添加ngIf子组件时，init将仅在定义getSpecDetials?后触发。

Answer 2

更好的解决方案是在儿童身上添加ngOnChanges角度生命周期钩子。只要输入有任何更改，这将更新您的子组件。使用*ngIf是另一种解决方案，但这只会更新一次 - 在初始化期间，更改不会被反映出来。请查看link，这非常容易解释。