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

有人知道如何掌握组件模板中定义的元素吗？使用$和可以使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元素的引用？

代替从那里注入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);
  }
}

获得任意的投影内容

请参阅访问包含的内容

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

constructor(myElement: ElementRef) { ... }

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

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) {
    // ...
  }
}

示例已更新以使用最新版本

有关本机元素的更多详细信息，请单击此处

Angular 4+：renderer.selectRootElement与CSS选择器一起使用以访问元素。

我有一个最初显示电子邮件输入的表单。输入电子邮件后，该表单将被扩展以允许他们继续添加有关其项目的信息。但是，如果他们不是现有客户，则该表单将在项目信息部分上方包含一个地址部分。

到目前为止，数据输入部分尚未拆分为组件，因此使用* ngIf指令管理这些部分。如果它们是现有客户，则需要将重点放在“项目注释”字段上，如果是新客户，则需要将其放在“名字”字段上。

我尝试解决方案没有成功。但是，此答案中的Update 3 给了我一半的最终解决方案。另一半来自MatteoNY在此主题中的回应。结果是这样的：

import { NgZone, Renderer } from '@angular/core';

constructor(private ngZone: NgZone, private renderer: Renderer) {}

setFocus(selector: string): void {
    this.ngZone.runOutsideAngular(() => {
        setTimeout(() => {
            this.renderer.selectRootElement(selector).focus();
        }, 0);
    });
}

submitEmail(email: string): void {
    // Verify existence of customer
    ...
    if (this.newCustomer) {
        this.setFocus('#firstname');
    } else {
        this.setFocus('#description');
    }
}

由于我唯一要做的就是将焦点放在某个元素上，因此我不必担心更改检测，因此实际上可以将调用运行到renderer.selectRootElementAngular之外。因为我需要给新的部分渲染时间，所以将元素部分包裹在一个超时中，以允许渲染线程有时间在尝试选择元素之前赶上。完成所有设置后，我可以使用基本的CSS选择器简单地调用该元素。

我知道这个示例主要处理焦点事件，但是对我来说很难在其他情况下使用。

对于尝试在*ngIf或中抢占组件实例的人们*ngSwitchCase，您可以遵循此技巧。

创建一个init指令。

import {
    Directive,
    EventEmitter,
    Output,
    OnInit,
    ElementRef
} from '@angular/core';

@Directive({
    selector: '[init]'
})
export class InitDirective implements OnInit {
    constructor(private ref: ElementRef) {}

    @Output() init: EventEmitter<ElementRef> = new EventEmitter<ElementRef>();

    ngOnInit() {
        this.init.emit(this.ref);
    }
}

使用以下名称导出组件： myComponent

@Component({
    selector: 'wm-my-component',
    templateUrl: 'my-component.component.html',
    styleUrls: ['my-component.component.css'],
    exportAs: 'myComponent'
})
export class MyComponent { ... }

使用此模板获取ElementRefAND MyComponent实例

<div [ngSwitch]="type">
    <wm-my-component
           #myComponent="myComponent"
           *ngSwitchCase="Type.MyType"
           (init)="init($event, myComponent)">
    </wm-my-component>
</div>

在TypeScript中使用此代码

init(myComponentRef: ElementRef, myComponent: MyComponent) {
}

ViewChild从导入装饰器@angular/core，如下所示：

HTML代码：

<form #f="ngForm"> 
  ... 
  ... 
</form>

TS代码：

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

class TemplateFormComponent {

  @ViewChild('f') myForm: any;
    .
    .
    .
}

现在，您可以使用“ myForm”对象来访问类中的任何元素。

Source

 */
import {Component,ViewChild} from '@angular/core' /*Import View Child*/

@Component({
    selector:'display'
    template:`

     <input #myname (input) = "updateName(myname.value)"/>
     <p> My name : {{myName}}</p>

    `
})
export class DisplayComponent{
  @ViewChild('myname')inputTxt:ElementRef; /*create a view child*/

   myName: string;

    updateName: Function;
    constructor(){

        this.myName = "Aman";
        this.updateName = function(input: String){

            this.inputTxt.nativeElement.value=this.myName; 

            /*assign to it the value*/
        };
    }
}

注：这并不适用于6角以上为ElementRef成为ElementRef<T>与T表示的类型nativeElement。

我想补充一下，如果您使用ElementRef，如所有答案所建议，那么您将立即遇到ElementRef具有可怕的类型声明的问题，该声明看起来像

export declare class ElementRef {
  nativeElement: any;
}

在nativeElement是的浏览器环境中，这是愚蠢的HTMLElement。

要解决此问题，您可以使用以下技术

import {Inject, ElementRef as ErrorProneElementRef} from '@angular/core';

interface ElementRef {
  nativeElement: HTMLElement;
}

@Component({...}) export class MyComponent {
  constructor(@Inject(ErrorProneElementRef) readonly elementRef: ElementRef) { }
}

获取下一个兄弟姐妹，使用此

event.source._elementRef.nativeElement.nextElementSibling

从列表中选择目标元素。从相同元素的列表中选择特定元素很容易。

组件代码：

export class AppComponent {
  title = 'app';

  listEvents = [
    {'name':'item1', 'class': ''}, {'name':'item2', 'class': ''},
    {'name':'item3', 'class': ''}, {'name':'item4', 'class': ''}
  ];

  selectElement(item: string, value: number) {
    console.log("item="+item+" value="+value);
    if(this.listEvents[value].class == "") {
      this.listEvents[value].class='selected';
    } else {
      this.listEvents[value].class= '';
    }
  }
}

html代码：

<ul *ngFor="let event of listEvents; let i = index">
   <li  (click)="selectElement(event.name, i)" [class]="event.class">
  {{ event.name }}
</li>

CSS代码：

.selected {
  color: red;
  background:blue;
}

快速使用的最小示例：

import { Component, ElementRef, ViewChild} from '@angular/core';

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

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

1. 将模板引用变量放在感兴趣的DOM元素上。在我们的示例中，这是标签#inputEl上的<input>。
2. 在我们的组件类中，通过@ViewChild装饰器注入DOM元素
3. 访问ngAfterViewInit生命周期挂钩中的元素。

注意：

如果要操作DOM元素，请使用Renderer2 API，而不是直接访问元素。允许直接访问DOM可以使您的应用程序更容易受到XSS攻击