angularjs - コンポーネントのローカル変数へのアクセスがAngular 2で失敗する

Question

DOM 要素を取得し、使用せずに JSON エディターを初期化したいElementRef。

コード：

import {Component, ViewChild} from 'angular2/core';

@Component({
    selector: 'json-editor',
    template: `
        <div #container class="json-editor-container"></div>
    `
})
export class JSONEditorComponent implements OnChanges {
    @ViewChild('container') private container = null;

    constructor() {
    }
}

どうthis.container見てもヌルです。私が書いたコードのどの部分が間違っていますか?

---

解決：

属性にアクセスする前にViewChild、ビューが初期化されていることを確認する必要があります。も@VarChild返しますElementRef。さらに処理する場合は DOMElement が必要です。nativeElement属性である属性を使用してください。Element

import {Component, ViewChild} from 'angular2/core';

@Component({
    selector: 'json-editor',
    template: `
        <div #container class="json-editor-container"></div>
    `
})
export class JSONEditorComponent implements OnChanges {
    @ViewChild('container') private container = null;
    private isViewInitialized: boolean = false;

    constructor() {
    }

    ngAfterViewInit() {
        this.isViewInitialized = true;
    }

    triggeredFromParentComponentOrWhatever() {
        if (this.isViewInitialized) {
            // Should work
            console.log(this.container.nativeElement);
        }

        // Might not work as view might not initialized
        console.log(this.container.nativeElement);
    }
}