如何在组件模板中选择元素？

Question

有人知道如何获取组件模板中定义的元素吗？ 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;
    }
}

如何从类定义中捕获或获取 p 或 input 元素的引用？

原文由 Aman Gupta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

与其注入 ElementRef 并使用 querySelector 或类似的方法，不如使用声明性方式直接访问视图中的元素：

 <input #myname>

 @ViewChild('myname') input;

元素

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

StackBlitz 示例

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

子孙

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

@ContentChildren(SomeTypeOrVarName, {descendants: true}) someField;

{descendants: true} 应该是默认值，但不在 2.0.0 最终版本中，它 被认为是一个错误

这已在 2.0.1 中修复

读

如果有组件和指令 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 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我使用了两种方式：

第一种方式：

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

 constructor(private myElement: ElementRef) {
this.myElement.nativeElement // <- your direct element reference
}

第二种方式：

 @Component({
  selector: 'my-app',
  template:
  `
  <input #input value="enterThere">
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('input') input:ElementRef;

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

原文由 Naeem Bashir 发布，翻译遵循 CC BY-SA 4.0 许可协议