使用ngOnInit()而不是构造函数; @Input()未定义

Question

首先,如果这是一个可怕的设计,我很乐意改变.

在我index.html的身体中,有:

<month [year]="2016" [monthOfYear]="4">Loading...</month>

month.component.ts 那么:

import { Component, Input, OnInit } from '@angular/core';
import { DayComponent } from '../day/day.component';
import * as Models from '../../../models/_models';

@Component({  
  selector: 'month',
  moduleId: module.id,
  templateUrl: 'month.component.html',
  styleUrls: ['month.component.css'],
  directives: [DayComponent]
})

export class MonthComponent {  
  name: string;
  days: Models.Day[];
  @Input('year') year: number;
  @Input('monthOfYear') monthOfYear: number;
  month: Models.Month;

  ngOnInit() {
    this.month = new Models.Month(this.year, this.monthOfYear);
    this.name = this.month.getMonthName();
    this.days = this.month.days;
  }
}

...... ngOnInit()并被正确地称呼.然而,在调用(或许永远,但我不知道如何来确定),两者的时间year和monthOfYear是undefined.

我如何确保传入值ngOnInit(),或者是否有更好的模式来实现这一目标？

Answer 1

所以这实际上非常简单,但从教程/文档中并不清楚.

这是解决方案:

<month year="2016" monthOfYear="4">Loading...</month>

属性周围的方括号表示组件应将那些视为父组件的数据绑定.因此,如果您想从父级传递这些值,则可以执行以下操作:

<month [year]="year" [monthOfYear]="month">Loading...</month>

在您的情况下,您正在分配字符串文字,因此不需要方括号.此外,您应该声明您的组件实现了OnInit,但这似乎与执行没有任何关系.