Question

遵循DynamicComponentLoader-class处的DynamicComponentLoader文档。我知道必须创建一个包装元素。在下面的示例中，包装元素是＆＃34;子组件＆＃34;。

   @Component({
      selector: 'child-component',
      template: 'Child'
    })
    class ChildComponent {
    }
    @Component({
      selector: 'my-app',
      template: 'Parent'
    })
    class MyApp {
      constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) {
        dcl.loadNextToLocation(ChildComponent, elementRef);
      }
    }
    bootstrap(MyApp);

产生的DOM：

    <my-app>Parent</my-app>
    <child-component>Child</child-component>

我的目标：

    <my-app>Parent</my-app>
    Child

我编写了自己的代码来处理它

loadIntoLocation(ChildComponent, cmp, 'child').then(function(ref) {
    var elem = ref.location.nativeElement;
    ref.instance._nativeElement = elem.firstElementChild; // this._nativeElement instead of this.elementRef.nativeElement
    if (elem.parentNode && elem.firstElementChild)
        elem.parentNode.replaceChild(elem.firstElementChild, elem);
    else
        console.log('can not delete Redundent ', elem);
})

我的＆＃34;粗糙＆＃34;代码完成了工作，但它似乎与ng2架构不一致。有没有想过更好的解决方案来避免包装元素？

Answer 1

您可以使用loadAsRoot()功能来达到您的要求

@Component({
  selector: 'child-component',
  template: 'Child'
})
class ChildComponent {
}
@Component({
  selector: 'my-app',
  template: 'Parent'
})
class MyApp {
  constructor(dcl: DynamicComponentLoader, elementRef: ElementRef, injector: Injector) {
    this.dcl.loadAsRoot(ChildComponent, "child-component", this.injector)
  }
}
bootstrap(MyApp);

DynamicComponentLoader - 如何避免冗余的包装元素？

1 个答案: