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 : get hold of an element in the template

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

Answer 3

为了阐述@Gunter上面的回应，你会像这样使用@ViewChild：

@ViewChild('myElem') myInput : ElementRef;
inputVal:string;

doSomething( input ){

  let startCursor = this.myInput.nativeElement.selectionStart;
  this.myInput.nativeElement.setSelectionRange(startCursor-1, startCursor-1);
}

html看起来像这样：

 <input #myElem type="text" [(ngModel)]="inputVal" maxlength="5" (keyup)="doSomething( myElem )"

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

3 个答案: