Question

我需要使用DynamicComponentLoader来加载组件。基本上，这可以使用loadNextToLocation(MyFormComponent, ...)。但MyFormComponent在其模板中使用<ng-content>，这会导致Angular抛出异常（消息：“组件...有1 <ng-content>个元素，但只提供了0个插槽。” ）

有没有办法以编程方式处理这个问题，即定义一个用于<ng-content>的HTML片段？

Answer 1

解决这个问题非常棘手。 DCL的当前语法不太有利于此类事情。

原来你可以将一个innerElement或nativeElement传递给DCL调用：

@Component({
  selector: 'bar',
  template: `<ng-content></ng-content>`
})
export class Bar {}

@Component({
  selector: 'foo',
  template: `
    <div #getThis>I'm gonna be injected!</div>
  `
})
export class Foo implements ngAfterViewInit {
  @ViewChild('getThis') getThis;

  constructor (
    private _dcl: DynamicComponentLoader,
    private _er: ElementRef
  ) {}

  ngAfterViewInit () {
    this._dcl.loadIntoLocation(Bar, this._er, null, null, [[this.getThis.internalElement]]);
  }
}

然而，正如您所看到的，这意味着预先准备好的元素。如果你想要动态HTML，你可能需要为foo模板做这些事情。

<div #getThis [innerHTML]="myHTML"></div>

并用你的组件填充它。

Angular2：DynamicComponentLoader，其组件使用<ng-content> </ng-content>

1 个答案: