如何在组件模板中选择元素? [英] 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(<ng-content>投影元素).

• @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中，它是认为错误
该问题已在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.

例如，动态创建的组件而不是默认的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屋！