角度4 @Input（）値が（ngOnInitに定義されていない）

Question

ヶdetail.component.html

import ... 
@Component({ 
    template: `{{month?.id}} <app-month-date [month]="month"></app-month-date>` 
}) 
export class MonthDetailComponent implements OnInit { 
    month: Month; 
    ngOnInit(): void { 
    this.route.params 
     .switchMap((params: Params) => this.monthService.getMonth(+params["id"])) 
     .subscribe(month => (this.month = month)); 
    } 
} 

ヶdate.component.html

<p>month-date works! {{month?.id}}</p> 

月-date.component.ts

import { Component, OnInit, Input } from "@angular/core"; 
import { Month } from "app/attendance/month"; 

@Component({ 
    selector: "app-month-date", 
    ... 
}) 
export class MonthDateComponent implements OnInit { 
    @Input() month: Month; 
    ngOnInit() { 
    //undefined --- here 
    console.log(this.month); 
    }} 

月？.idはmonth-detail.component.htmlに正しく表示されますが、月はapp-month-dateのタグがmonth-date.component.tsで定義されていません。 ngOnInitで値を取得できない場合がありますか？月の入力値がそれに送られる前に、子コンポーネントを確保することによってこの問題を解決することができます

Answer 1

は、あなたの親テンプレートに* ngIfを含めることによって初期化されていません。

@Component({ 
    template: `{{month?.id}} <app-month-date *ngIf="month" [month]="month"></app-month-date>` 
})