2

まず第一に、これがひどいデザインである場合は、喜んで変更します。

私の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()、またはこれを達成するためのより良いパターンはありますか?

4

2 に答える 2

5

したがって、これは実際には非常に単純ですが、チュートリアル/ドキュメントからは明らかではありません。

解決策は次のとおりです。

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

属性を囲む角括弧は、コンポーネントがそれらを親コンポーネントへのデータ バインディングとして扱う必要があることを示します。したがって、これらの値を親から渡したい場合は、次のようにします。

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

あなたの場合、文字列リテラルを割り当てているため、角括弧は必要ありません。また、コンポーネントが OnInit を実装していることを宣言する必要がありますが、それは実行には関係がないようです。

于 2016-05-25T00:01:41.547 に答える
2

私の理解が正しければ、 index.html から Component (この場合はルート component ) にいくつかの値を渡そうとします。Angular はルート コンポーネントによってブートストラップされ、index.html (Angular をホストするページ) を提供できないため、これが機能するかどうかはわかりません。

通常、index.html にはルート (AppComponent としましょう) があります。AppComponent には、コンポーネント (MonthComponent など) が含まれています。AppComponent は MonthComponent に値を渡すことができます。

これが役立つことを願っています

于 2016-05-25T03:51:26.643 に答える