angular - 渲染器多个 selectRootElement 问题

Question

我正在尝试使用 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);   
    }

}

当我尝试运行它时，出现以下错误:

EXCEPTION: The selector ".inner1" did not match any elements in [{{exampleData.end}} in MainViewComponent@3:65]

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

你知道这是从哪里来的吗？

更新

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

Answer 1

不要使用 selectRootElement

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

只需在 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 有什么问题？它返回没有其子元素的元素，并且 View 中没有任何变化!当然，您仍然可以使用它，但是您将违背它的目的并滥用它，就像人们使用 DynamicComponentLoader#loadAsRoot 并手动订阅 EventEmitter。

好吧，毕竟它的名字 selectRootElement 已经说明了它的大部分功能，不是吗？

您有两个选项可以抓取 View 内的元素，还有两个正确的选项。

• 使用局部变量和@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
    }
)