Angular 2:将视图/ DOM注入组件构造函数

Question

我无法弄清楚如何为组件提供对其视图的引用,以便在显示表单时执行诸如关注输入元素之类的操作.我不能出现注入Element或ng.core.ViewRef或ng.core.View到构造.如何访问视图？

在Angular 1中,我会用$ link做到这一点.

Answer 1

您正在寻找的可能是ElementRef它的nativeElement领域,但您应该避免以这种方式访问​​DOM.我认为更好的方法是添加模板变量<input #inp>和访问它@ViewChild('inp') input.在ngAfterViewInit input引用中输入元素.

另请参见angular 2/typescript:获取模板中的元素

Answer 2

我还要警告Angular中的直接DOM访问,但这里有一个如何做的例子:

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

declare var jQuery:any;

@Component({
    selector: 'jquery-integration',
    templateUrl: './components/jquery-integration/jquery-integration.html'
})
export class JqueryIntegration implements OnInit {

    constructor(private elementRef: ElementRef) {

    }

    ngOnInit() {
        jQuery(this.elementRef.nativeElement).find('.moving-box').draggable({containment:'#draggable-parent'});
    }
}

关键的想法是注入elementRef.然后,您可以将其视为常规DOM元素.在我的示例中,我使用的是jquery,但您也可以使用标准DOM访问.

更多信息:http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0