不要使用selectRootElement

Question

我正在尝试使用Renderer.selectRootElement从我的Component中获取一些元素，如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);   
    }

}

当我尝试运行时，我有一个错误：

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

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

任何想法来自何处？

更新

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

Answer 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和订阅那样滥用它的目的并滥用它手动到EventEmitter。

嗯，毕竟它的名字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
    }
)

Answer 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.
     */

抽象selectRootElement（selectorOrNode：字符串|任意， preserveContent ?：布尔值）：任意；

感谢埃里克（Eric）提醒您，它默认会删除内容！

Renderer多个selectRootElement问题

2 个答案:

不要使用selectRootElement