Question

我的组件的模板文件：

<form (ngSubmit)="onSubmit()" #scheduleForm="ngForm" *ngIf="schedule">
    <div #placeholder></div>

</form>

我想在占位符div中添加两个组件。这是我在ngOnInit中添加组件的代码：

const factory = this.componentFactoryResolver.resolveComponentFactory(ExternalComponent);
    let ref = this.viewContainerRef.createComponent(factory);
    ref.changeDetectorRef.detectChanges();
     ref = this.viewContainerRef.createComponent(factory);
    ref.changeDetectorRef.detectChanges();

其中ExternalComponent是我要放入的组件。使用此代码，在模板末尾添加ExternalComponents（在登录表单之后）。我如何将它放在#placeholder div中？

Answer 1

这是设计上的。 https://github.com/angular/angular/issues/9035

如果您希望将动态组件放在div内，请在template内添加ng-container或div（它们没有标记到DOM）并使用它。

@Component({
  selector: 'my-app',
  template: `
      <div>
        <ng-container #placeholder></ng-container>
      </div>`
})
export class AppComponent implements OnDestroy { 
  @ViewChild('placeholder', { read: ViewContainerRef }) placeholderContainer: ViewContainerRef;

  compRef: ComponentRef<any>;

  constructor(private resolver: ComponentFactoryResolver) {}

  ngOnInit() {
    const factory = this.resolver.resolveComponentFactory(MyComponent);
    let compRef = this.placeholderContainer.createComponent(factory);
    this.compRef = compRef;
  }

  ngOnDestroy() {
    this.compRef.destroy();
  }
}

Plunker Example

Angular2：将组件插入某个位置

1 个答案: