在 Angular 2 中访问组件中的局部变量失败

Question

我想在不使用ElementRef 的情况下获取 DOM 元素并初始化 JSON 编辑器。

代码：

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);
    }
}

Answer 1

您不能在构造函数中访问container。仅在ngAfterViewInit()之前设置

ngViewInit() {
  container.nativeElement...
}