如何在组件中查找元素？答案

【问题标题】：How to find element in a component?如何在组件中查找元素？
【发布时间】：2016-07-02 09:42:01
【问题描述】：

我想知道如何使用 Renderer 在组件中找到元素？

在 angular1 中我会去：

link = (scope, element, attributes) => {
            var outsideBox = element.find('.outside-box');
}

返回给我的是<div class="outside-box"></div>

任何指针都非常受欢迎！

【问题讨论】：

为什么是 Renderer，而不是 @ViewChild 或 @ViewChildren（假设您可以将本地模板变量添加到 div）？
@MarkRajcok，我很想看看 ViewChild 的使用示例。你能提供任何链接吗？
angular.io/docs/ts/latest/cookbook/…

标签： angular

【解决方案1】：

我会使用它的selectRootElement 方法：

import {Component,Renderer} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div class="outside-box"></div>
      <div (click)="onClick()">Click</div>
    </div>
  `
})
export class AppComponent {
  constructor(private renderer:Renderer) {
  }

  onClick() {
    var outsideBox = this.renderer.selectRootElement('.outside-box');
  }
}

看到这个 plunkr：https://plnkr.co/edit/9OJ9kr?p=preview

【讨论】：

有趣的事情 - 我在我的组件中的构造函数中放置了相同的代码 - 但它不起作用。我不得不把它放在 ngOnChanges -> 似乎构造函数在 HTML 之前被触发，对吗？
是的，我认为在构造函数中调用为时过早，因为模板是稍后渲染的。 ngOnInit 会更好，因为ngOnChanges 可以多次调用。但是第一次调用它时你是对的，它在 ngOnInit 之前...
实际上，我认为 ngOnChanges 似乎在 ngOnInit 之前被调用
是的，已更改的绑定值。所以以后可以多次调用...
selectRootElement 从元素中删除子节点。我猜它的目的是为组件初始化准备元素。当然不是必需的。

【解决方案2】：

我会使用Plunker - BrowserDomAdapter

import {Component,ElementRef} from 'angular2/core';
import {BrowserDomAdapter} from 'angular2/platform/browser';
//import { DOM } from 'angular2/src/platform/dom/dom_adapter';
@Component({
    selector: 'my-app',
    template: `
    <style>
      .test{
        color:green;
        background:white;
      }
    </style>
    <button (click)="add()" class="btnClass">Add New Element</button>
    `
})

export class AppComponent {
 dom:BrowserDomAdapter;
  constructor(el:ElementRef) { 
    this.dom = new BrowserDomAdapter();
    console.log(el);
  }
  add(){

      console.log( this.dom.query(".btnClass"));    
      this.dom.addClass(this.dom.query(".btnClass"),"test");
      console.log(this.el);

  }
}

https://angular.io/docs/ts/latest/api/platform/browser/BrowserDomAdapter-class.html

【讨论】：

那个 angular.io/docs 页面是 404；你有更新的链接吗？