從父組件傳遞到子組件的對象始終為null

Question

請參閱下面的代碼，雖然我已經初始化的根組件屬性frmeta並添加@Input物業裝飾meta內DformComponent ，孩子DformComponent還是從內部的根組件得到一個空DformComponent constructor 。 我的代碼有什么問題嗎？

根組件

import { Component } from '@angular/core';
import { DformComponent } from './controls/DformComponent';

function containsMagicWord(c: any) {
  if(c.value.indexOf('magic') >= 0) {
    return {
      noMagic: true
    }
  }

  // Null means valid, believe it or not
  return null
}

@Component({
  selector: 'body',
  templateUrl: 'RootComponent.html',
  providers: [DformComponent]
})
export class RootComponent {
  frmeta:any = {
      phone:["123456789", containsMagicWord]
      , ip:["192.168.137.169", containsMagicWord]
  };
  constructor(){
    // this.frmeta has been initialized here
    // this log is before the DformComponent constructor log
    console.log(this.frmeta);
  }
}

RootComponent.html

<dform [meta]="frmeta"></dform>

DformComponent.ts

import { Component, Attribute, Input, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
    selector:'dform',
    templateUrl:'DformComponent.html'
})
export class DformComponent implements OnInit{
  frmdata:any;
  @Input() meta:any;
  constructor(fb:FormBuilder, @Attribute('meta') meta:any){
    // both meta & this.meta are always undefined & null
    this.meta = meta;
    console.log(meta);
    debugger;
    this.frmdata = fb.group(this.meta);
  }

  ngOnInit(){

  }

  dosubmit(event:any){
    console.log(this.frmdata.value);
  }
}

DformComponent.html

<form [formGroup]="frmdata" (submit)="dosubmit($event)">
    <inputmask formControlName="phone" mask="(___) ___ - ___"></inputmask>
    <inputmask formControlName="ip" mask="___.___.___.___" ></inputmask>
    <button type="submit">Post</button>
    <pre>{{ frmdata.value|json }}</pre>
</form>

Answer 1

您無法訪問構造函數中的bound屬性，因為它尚不可用。 使用ngOnInit生命周期鈎子，您將可以在其中訪問它。