渲染多个selectRootElement问题（与plnkr提供） [英] Renderer multiple selectRootElement Issue (with plnkr provided)

问题描述

想使用Renderer.selectRootElement摆脱我的组件的一些元素，如所描述<一个href=\"http://stackoverflow.com/questions/36036885/how-to-find-element-in-a-component/36037121#36037121\">here.

am trying to use Renderer.selectRootElement to get some elements from my Component, as described here.

一切工作正常，除非我只选择一个元素（ plnkr ）

Everything works fine, unless I select only one element (plnkr).

正如你所看到的，我创建了一个组件：

As you can see, I have created a component:

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);   
    }

}

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

When I try to run this, I have an 1 error of :

例外：选择.inner1没有匹配任何元素[{{exampleData.end}}在MainViewComponent @ 3：65]

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

（但是，在我的应用程序中，只有第一个容器被发现，则没有其他人发现的）。

(however, in my app, only first container is found, then none others are found).

任何想法，这是否是从哪里来的？

Any ideas where does this come from?

更新

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

I found out that the directive is not invoked fully - only div with class contaier gets added to the HTML.

推荐答案

其目的是不要选择在您的组件鉴于选择随机元素。

DO NOT USE selectRootElement

Its purpose is not to select random elements by selector in your components view.

只要看到它的实施<一个href=\"https://github.com/angular/angular/blob/master/modules/angular2/src/platform/dom/dom_renderer.ts\"相对=nofollow> 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;
 }

你看到一些有趣的事情呢？它移除元素中的节点！为什么要这么做？因为它的目的是要抢根元素！那么，哪一个是根元素？这是否听起来很熟悉？

Do you see something interesting there? It's removing the nodes inside the element! Why would it do that? Because its purpose it's to grab the root element! So which one is the root element? Does this sound familiar?

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

是的！这是根元素。那好吧，但是的什么是错用 selectRootElement 如果我只想抢元素？它返回时其子女并没有什么元素在视图中的变化！的嘛，你仍然可以使用它，当然，但你会战胜它的目的和滥用它，就像人们使用 DynamicComponentLoader #loadAsRoot 并手动订阅EventEmitter。

Yes! That's the root element. Okay then, but what's wrong with using selectRootElement if I only want to grab the element? It returns the element without its children and nothing changes in the view! Well, you can still use it of course, but you will be defeating its purpose and misusing it just like people do with DynamicComponentLoader#loadAsRoot and subscribing manually to EventEmitter.

好了，所有的名字后， selectRootElement 表示，pretty多少它做什么，不是吗？

Well, after all its name, selectRootElement, says pretty much what it does, doesn't it?

您有两种选择抓取你的视图中的元素，以及两个正确的选项。

You have two options to grab elements inside your view, and two correct options.

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

这篇关于渲染多个selectRootElement问题（与plnkr提供）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！