Question

我知道之前已经多次询问过这个问题（有些答案使用了弃用的api＆＃39; s）但我真的很难理解如何将动态组件插入模板中的特定元素。

我使用的是rc-5。

我有一个无限滚动列表，每次触发load事件时都应创建并插入新的广告组件。

我遇到的问题是我只能在目标元素旁边插入新组件，而我想要做的是附加到目标元素中的列表。

我目前的代码如下所示：

//This is my target
@ViewChild('adList', {read: ViewContainerRef}) adList:ViewContainerRef;
private _componentReference: ComponentRef<AdvertisementComponent>;

然后我有一个加载广告的功能

loadAdContent(): void {
    this._adsSubscription = this._adService.getAdvertisments().subscribe((ads) => {
      if(ads.error){
        if(ads.error === ErrorCode.NOT_LOGGED_IN) {
          //this._router.navigate(['/welcome']);
        }
      } else {
        for(let ad of ads.urls) {
          let componentFactory = this._componentFactoryResolver.resolveComponentFactory(AdvertisementComponent);

          this._componentReference =   this.adList.createComponent(componentFactory);
          //Get instance so we access the properties
          let componentInstance = this._componentReference.instance;
          componentInstance.url = ad;
        }
      }
    }, (error) => {
      console.log("Error", error);
    }, () => {
      //Always
    });
  }

这是我的模板

<div on-scroll='scrollHandler()'>
  <ul>
    <!-- Hack because we can't embed element -->
    <li #adList style="display: none;"></li>

    <li scroll-item><!— footer —></li>
  </ul>
</div>

我想将目标设置为ul元素，如下所示

<div on-scroll='scrollHandler()'>
  <ul #adList>
    <!— I want to add an element between here -->

    <!— and here —>
    <li scroll-item><!— footer —></li>
  </ul>
</div>

所以，我的问题是我该如何做相当于jQuery.append（）？

Angular 2将动态组件插入特定元素

0 个答案: