在组件访问本地变量角2失败 [英] Access local variable in Component fails in Angular 2

问题描述

我想要得到的DOM元素并初始化一个JSON编辑器，而无需使用 ElementRef 。

code：

 进口{组件，ViewChild}从'angular2 /核心;@零件（{
    选择：JSON编辑器，
    模板：`
        ＆LT;的div #container的类=JSON-编辑容器＆GT;＆LT; / DIV＆GT;
    `
}）
出口类JSONEditorComponent实现OnChanges {
    @ViewChild（容器）私营集装箱= NULL;    构造函数（）{
    }
}
 

不管 this.container 如何，仍是空。其中code的一部分，我写的是错的？

---

解决方案：

在您访问 ViewChild 属性，必须确认该视图已初始化。此外 @VarChild 收益 ElementRef ，如果你要处理它进一步要求一个DOMElement，请使用 nativeElement 属性，它是一个元素

 进口{组件，ViewChild}从'angular2 /核心;@零件（{
    选择：JSON编辑器，
    模板：`
        ＆LT;的div #container的类=JSON-编辑容器＆GT;＆LT; / DIV＆GT;
    `
}）
出口类JSONEditorComponent实现OnChanges {
    @ViewChild（容器）私营集装箱= NULL;
    私人isViewInitialized：布尔= FALSE;    构造函数（）{
    }    ngAfterViewInit（）{
        this.isViewInitialized = TRUE;
    }    triggeredFromParentComponentOrWhatever（）{
        如果（this.isViewInitialized）{
            //应该工作
            的console.log（this.container.nativeElement）;
        }        作为视图可能未初始化//可能无法正常工作
        的console.log（this.container.nativeElement）;
    }
}
 

解决方案

您无法访问容器在构造函数中。它仅是前几个 ngAfterViewInit设置（）

  ngViewInit（）{
  container.nativeElement ...
}
 

I want to get the DOM element and initialize a JSON Editor without using ElementRef.

Code:

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() {
    }
}

No matter how, this.container is still null. Which part of code I wrote is wrong?

---

Solution:

Before you access the ViewChild attribute, you must confirm the view has initialized. Also @VarChild returns ElementRef, if you want to process it further requires DOMElement, please use nativeElement attribute which is a 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);
    }
}

解决方案

You can't access container in the constructor. It is only set just before ngAfterViewInit()

ngViewInit() {
  container.nativeElement...
}

这篇关于在组件访问本地变量角2失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！