Компонент не создается динамически для div, указанного с помощью ViewChild в Angular

Question

Я пытаюсь добавить / создать в указанном c div компонент. Тем не менее, компонент создается, но не там, где мне бы хотелось. Что я делаю не так?

Я бы хотел, чтобы компонент k-sidebar находился внутри div, который я показываю на изображении.

Ниже приведен мой код.

App.component

 import { Component, OnInit, OnDestroy, ViewChild, ElementRef, Renderer2, ViewContainerRef, 
 ComponentFactoryResolver, ComponentRef, ComponentFactory} from '@angular/core';
 @Component({
  selector: 'app-comp',
  templateUrl: './app-comp.component.html',
  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent implements OnInit {
  componentRef: any;
  @ViewChild('dynamicSidebar', {read: ViewContainerRef})
  public dynamicSidebar: ViewContainerRef;

  constructor(private factoryResolver: ComponentFactoryResolver,
   private containerRef: ViewContainerRef) { }

  ngOnInit() {
   this.createSidebarComp();
 }


 createSidebarComp(){
  this.containerRef.clear();
  this.containerRef.createComponent(this.factoryResolver.resolveComponentFactory(KSideBarComponent));
 }
}

HTML

<!-- header test -->
<k-header [navItems]="navItems" [title]="title">
 <ng-template rightSection>
 <k-icon [icon]="testIcon"></k-icon>
</ng-template>
</k-header>
<!-- /header test -->

<div class="container-fluid">
 <div #dynamicSidebar></div>
 <h1>{{title}} app is running!</h1>
 <router-outlet></router-outlet>

</div>

Боковая панель находится внутри розетки маршрутизатора, и я хотел бы создать компонент над тегом h1 на основе логического значения. Что я делаю не так?

Answer 1

Вы можете сделать

createSideBarComp() {
     this.dynamicSidebar.createComponent(this.factoryResolver.resolveComponentFactory(KSideBarComponent));
}

проблема в том, что вы не привязываетесь к взятой вами ссылке на боковую панель (dynamicSideBar). Но вы пытаетесь присоединиться к viewContainerRef, внедренному для компонента через конструктор. Это не то место, где вы хотите создать компонент.