如何选择组件模板中的元素? [英] How can I select an element in a component template?

问题描述

有人知道如何获取组件模板中定义的元素吗?Polymer 使 $ 和 $$ 变得非常容易.

Does anybody know how to get hold of an element defined in a component template? Polymer makes it really easy with the $ and $$.

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

I was just wondering how to go about it in 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 元素的引用?

How do I catch hold or get a reference of the p or input element from within the class definition?

推荐答案

代替注入 ElementRef 并使用 querySelector 或类似的方法，可以使用声明式方式代替直接访问视图中的元素:

Instead of injecting ElementRef and using querySelector or similar from there, a declarative way can be used instead to access elements in the view directly:

<input #myname>

@ViewChild('myname') input; 

元素

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

StackBlitz 示例

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

• @ViewChild() supports directive or component type as parameter, or the name (string) of a template variable.
• @ViewChildren() also supports a list of names as comma separated list (currently no spaces allowed @ViewChildren('var1,var2,var3')).
• @ContentChild() and @ContentChildren() do the same but in the light DOM (<ng-content> projected elements).

后代

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

@ContentChildren() is the only one that allows to also query for descendants

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

<打击>{descendants: true} 应该是默认值，但不是在 2.0.0 final 中，它是 认为是错误
这已在 2.0.1 中修复

{descendants: true} should be the default but is not in 2.0.0 final and it's considered a bug
This was fixed in 2.0.1

阅读

如果有组件和指令，read 参数允许指定应该返回哪个实例.

If there are a component and directives the read parameter allows to specify which instance should be returned.

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

For example ViewContainerRef that is required by dynamically created components instead of the default ElementRef

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

订阅更改

即使视图子项仅在调用 ngAfterViewInit() 时设置，内容子项仅在调用 ngAfterContentInit() 时设置，如果您想订阅更改查询结果，应该在ngOnInit()

Even though view children are only set when ngAfterViewInit() is called and content children are only set when ngAfterContentInit() is called, if you want to subscribe to changes of the query result, it should be done in 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 元素，不能查询组件或指令实例:

can only query DOM elements, but not components or directive instances:

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);
  }
}

获取任意投影内容

参见访问嵌入的内容

这篇关于如何选择组件模板中的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！