javascript - Angular 2 : insert component into a certain position

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(它们不会标记到 DOM ) 在 div 内并使用它。

@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