【问题标题】：Renderer multiple selectRootElement Issue渲染器多个 selectRootElement 问题
【发布时间】：2019-04-03 08:58:31
【问题描述】：

我正在尝试使用 Renderer.selectRootElement 从我的组件中获取一些元素，如 here 所述。

一切正常，除非我只选择一个元素 (plnkr)。

如你所见，我已经创建了一个组件：

export class ExampleComponent implements OnInit{
    @Input() start: any;
    @Input() end: any;

  constructor(public _renderer:Renderer){

  };

    ngOnChanges(){

    }
    ngOnInit(){
        console.log("NG ON CHAN START DATE",this.start);
        console.log("NG ON INIT END DATE",this.end);
        var container =  this._renderer.selectRootElement('.container');
        console.log(container);   
        var inner1 =  this._renderer.selectRootElement('.inner1');
        console.log(inner1);   
        var inner2 =  this._renderer.selectRootElement('.inner2');
        console.log(inner2);   
    }

}

当我尝试运行此程序时，出现以下错误：

例外：选择器“.inner1”与 [{{exampleData.end}} in MainViewComponent@3:65] 中的任何元素都不匹配]

（但是，在我的应用中，当只找到第一个容器时，就找不到其他容器了）。

你有什么想法吗？

更新

我发现该指令没有被完全调用 - 只有类 container 的 div 被添加到 HTML。

【问题讨论】：

我不知道确切的问题是什么.. 但是你仍然可以使用BroswerDomAdapter 似乎对DOM 操作很有好处，而且它由 DOM Api 提供动力:-)。
我不知道究竟是什么原因造成的，但你可以插入一个零超时，然后它按预期工作：plnkr.co/edit/MKLf6EWGa9xvjKUJDW2q?p=preview
@micronyks，是否有关于 BrowserDomAdapter 的任何文档？有 0 个谷歌结果大声笑
是的，文档不可用。但如果你熟悉 javascript DOM api，那么你可以将它与 BroswerDomAdapter 一起使用。

标签： angular

【解决方案1】：

不要使用 selectRootElement

它的目的不是在组件视图中通过选择器选择随机元素。

只需在DomRootRenderer中查看其实现

selectRootElement(selector: string): Element {
    var el = DOM.querySelector(this._rootRenderer.document, selector);
    if (isBlank(el)) {
      throw new BaseException(`The selector "${selector}" did not match any elements`);
    }
    DOM.clearNodes(el);
    return el;
 }

你在那里看到一些有趣的东西吗？它正在删除元素内的节点！为什么会这样做？因为它的目的是抓住根元素！那么哪一个是根元素呢？这听起来很熟悉吗？

<my-app>
    Loading...
</my-app>

是的！那是根元素。好吧，但是 如果我只想抓取元素，那么使用 selectRootElement 有什么问题？它返回没有子元素的元素，并且视图中没有任何变化！ 当然，您仍然可以使用它，但是您将违背它的目的并滥用它，就像人们使用 DynamicComponentLoader#loadAsRoot 并手动订阅一样事件发射器。

好吧，毕竟它的名字selectRootElement 几乎说明了它的作用，不是吗？

您有两个选项来抓取视图中的元素，还有两个正确的选项。

使用局部变量和@ViewChild

<div #myElement>...</div>

@ViewChild('myElement') element: ElementRef;

ngAfterViewInit() {
   // Do something with this.element
}

创建一个指令来获取你想要的元素

@Directive({
    selector : '.inner1,inner2' // Specify all children
    // or make one generic
    // selector : '.inner'
})
class Children {}

template : `
    <div class="container">
        <div class="inner1"></div>
        <div class="inner2"></div>
        
        <!-- or one generic
            <div class="inner"></div>
            <div class="inner"></div>
        -->
    </div>
`
class Parent (
    @ViewChildren(Children) children: QueryList<Children>;
    ngAfterViewInit() {
        // Do something with this.children
    }
)

【讨论】：

这很好的解释 - 谢谢！但是，我决定使用 ElementRef 函数如下：this.ElementRef.nativeElement.firstChild.firstElementChild 等，来访问我正在寻找的 div
@uksz 我强烈推荐你使用Directives，因为webworkers不鼓励直接使用nativeElement，这没有错，但是会给你带来麻烦。如果没有其他方法，请使用nativeElement 作为您的最后一个资源，只需在其documentation 中查看警告
关于selectRootElement方法的很好的解释，谢谢！
@EricMartinez 你好，谢谢你的回复。虽然我不得不问：ElementRef 返回一个元素的引用，而不是元素 itslef。比如说，当他们想要 div 的背景颜色时，应该如何进行？

【解决方案2】：

如果您想保留内容，请使用 true 的第二个布尔参数，如下所示：（使用 Angular 6）

let activeLi = this.renderer.selectRootElement('ul.ddl>li.active', true);

查看 API 的详细信息

     /*
     * Implement this callback to prepare an element to be bootstrapped
     * as a root element, and return the element instance.
     * @param selectorOrNode The DOM element.
     * @param preserveContent Whether the contents of the root element
     * should be preserved, or cleared upon bootstrap (default behavior).
     * Use with `ViewEncapsulation.ShadowDom` to allow simple native
     * content projection via `<slot>` elements.
     * @returns The root element.
     */

abstract selectRootElement(selectorOrNode: string | any, preserveContent?: boolean): any;

感谢 Eric 提醒它默认会删除内容！

【讨论】：