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，但这似乎与执行无关。

Answer 2

如果我理解正确，您尝试将一些值从index.html传递给Component（在这种情况下成为根组件）。我不确定这是否可行，因为Angular被root组件引导并且无法提供index.html（这是托管Angular的页面）。

通常在index.html中你有一个root（让我们说AppComponent）。 AppComponent包含您的组件（例如MonthComponent）。 AppComponent CAN将值传递给MonthComponent。

我希望这会有所帮助

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

2 个答案: