在 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 属性之前，您必须确认视图已初始化。还有@VarChildreturnsElementRef，如果你想进一步处理它需要DOM元素，请使用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...
}

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

Access local variable in Component fails in Angular 2

angularjs

angular2-directives

angular

代码：

解决方案：