开发者问题收集

如何选择组件模板中的元素?

2015-09-21
990248

有人知道如何获取组件模板中定义的元素吗?Polymer 借助 $$$ 让获取元素变得非常简单。

我只是想知道如何在 Angular 中实现它。

以教程中的示例为例:

import {Component} from '@angular/core';

@Component({
    selector:'display',
    template:`
     <input #myname (input)="updateName(myname.value)"/>
     <p>My name : {{myName}}</p>
     `   
})
export class DisplayComponent {
    myName: string = "Aman";
    updateName(input: String) {
        this.myName = input;
    }
}

如何在类定义中获取 pinput 元素的引用?

3个回答

无需注入 ElementRef 并从那里使用 querySelector 或类似方法,而是可以使用声明性方式直接访问视图中的元素:

<input #myname>
@ViewChild('myname') input; 

元素

ngAfterViewInit() {
  console.log(this.input.nativeElement.value);
}

StackBlitz 示例

  • @ViewChild() 支持指令或组件类型作为参数,或模板变量的名称(字符串)。
  • @ViewChildren() 还支持以逗号分隔的名称列表(当前不允许使用空格 @ViewChildren('var1,var2,var3') )。
  • @ContentChild() @ContentChildren() 执行相同的操作,但在 light DOM 中( <ng-content> 投影元素)。

descendants

@ContentChildren() 是唯一允许您查询后代的函数

@ContentChildren(SomeTypeOrVarName, {descendants: true}) someField; 
`{descendants: true}` 应为默认值,但在 2.0.0 最终版中并非如此,并且 [被视为错误](https://github.com/angular/angular/issues/11645#issuecomment-247650618) 此问题已在 2.0.1 中修复

read

如果存在组件和指令,则 read 参数允许您指定应返回哪个实例。

例如,动态创建的组件所需的 ViewContainerRef 而不是默认值 ElementRef

@ViewChild('myname', { read: ViewContainerRef }) target;

订阅更改

尽管仅在调用 ngAfterViewInit() 时设置视图子项,仅在调用 ngAfterContentInit() 时设置内容子项,但如果要订阅查询结果的更改,则应在 ngOnInit() 中完成。

https://github.com/angular/angular/issues/9689#issuecomment-229247134

@ViewChildren(SomeType) viewChildren;
@ContentChildren(SomeType) contentChildren;

ngOnInit() {
  this.viewChildren.changes.subscribe(changes => console.log(changes));
  this.contentChildren.changes.subscribe(changes => console.log(changes));
}

直接访问 DOM

只能查询 DOM 元素,不能查询组件或指令实例:

export class MyComponent {
  constructor(private elRef:ElementRef) {}
  ngAfterViewInit() {
    var div = this.elRef.nativeElement.querySelector('div');
    console.log(div);
  }

  // for transcluded content
  ngAfterContentInit() {
    var div = this.elRef.nativeElement.querySelector('div');
    console.log(div);
  }
}

获取任意投影内容

请参阅 访问嵌入内容

Günter Zöchbauer
2016-02-04

您可以通过将 ElementRef 注入到组件的构造函数中来获取 DOM 元素的句柄:

constructor(private myElement: ElementRef) { ... }

文档: https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html

Brocco
2015-09-21
import { Component, ElementRef, OnInit } from '@angular/core';

@Component({
  selector:'display',
  template:`
   <input (input)="updateName($event.target.value)">
   <p> My name : {{ myName }}</p>
  `
})
class DisplayComponent implements OnInit {
  constructor(public element: ElementRef) {
    this.element.nativeElement // <- your direct element reference 
  }
  ngOnInit() {
    var el = this.element.nativeElement;
    console.log(el);
  }
  updateName(value) {
    // ...
  }
}

示例已更新,以适用于最新版本

有关原生元素的更多详细信息,请访问 此处

gdi2290
2015-09-22