如何使用angular2和typescript在我的视图中获取指定的htmlelement

Question

我正面临一个问题.我希望在angular2中获得一个htmlelement,这是我的看法

<p>
    <button (click)="setJSON()">Set JSON</button>
    <button (click)="getJSON()">Get JSON</button>
</p>
<div id="jsoneditor">

</div>

我想访问我班级中的jsoneditor并将其传递给我的JSONEditor https://github.com/josdejong/jsoneditor/blob/master/docs/api.md告诉它在哪里渲染编辑器.

这是我的班级:

export class JsonComponent {

    container: HTMLElement;
    editor1: JSONEditor;
    options;

    constructor(public router: Router, public element: ElementRef) {

        this.container = this.element.nativeElement

        this.options = { "mode": "tree", "search": true };            
        this.editor1 = new JSONEditor(this.container,this. options);
        var json = {
            "Array": [1, 2, 3],
            "Boolean": true,
            "Null": null,
            "Number": 123,
            "Object": { "a": "b", "c": "d" },
            "String": "Hello World"
        };
        this. editor1.set(json);
        this. editor1.expandAll();
    }                  

    setJSON() {
        alert("setJson");
    }
    getJSON() {
        alert("getJson");
    }
}

Answer 1

也许是这样的:

import {Component, ElementRef, Inject, OnInit} from 'angular2/core';

@Component({
    selector: 'my-component',
    templateUrl: './my-template.html'
})
export class SomeComponent implements OnInit {
    elementRef: ElementRef;

    constructor(@Inject(ElementRef) elementRef: ElementRef) {
        this.elementRef = elementRef;
    }

    ngOnInit() {
        console.log(this.elementRef.nativeElement.querySelector('#jsoneditor'));
    }
}

这应该从组件元素中找到编辑器元素.