我正在尝试根据我在文章中找到的在线示例创建动态组件。它似乎不起作用。这是文章链接，以供参考https://netbasal.com/dynamically-creating-components-with-angular-a7346f4a982d

动态组件最终将成为一个移动导航菜单，但现在它只是一个简单的文本显示，目的是使概念生效。

我关注了两篇不同的文章，但是我分享的文章似乎是最简洁，最简单的解释。我不确定出现了什么问题以及为什么单击时没有为我生成组件。

import { Component,OnInit,ComponentFactoryResolver,ViewChild,ViewContainerRef,ComponentFactory,ComponentRef } from '@angular/core';
import { AuthService } from '../../../core';
import {
  Router,} from '@angular/router';
import { ConfigAssetLoaderService } from '../../../core/services/config-asset-loader.service';
import { MobileNavbarComponent } from '../mobile-navbar/mobile-navbar.component';

@Component({
  selector: 'thrive-navbar',templateUrl: './navbar.component.html',styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {

  @ViewChild("mobileNavbarContainer",{read: ViewContainerRef}) container;
  componentRef: ComponentRef<MobileNavbarComponent>;

constructor(
    public authService: AuthService,private configService: ConfigAssetLoaderService,public router: Router,private resolver: ComponentFactoryResolver) {}

 createComponent(side) {
    this.container.clear();
    this.mobileNavOpen = true;
    const factory: ComponentFactory<MobileNavbarComponent> = this.resolver.resolveComponentFactory(MobileNavbarComponent);
    this.componentRef = this.container.createComponent(factory);
    this.componentRef.instance.title = side;
  }

}

以下是移动模板：

<ng-container #mobileNavbarContainer></ng-container>
<button (click)="createComponent()">Open Nav</button>

以下是移动导航组件：

import { Component,Input } from '@angular/core';
import { AnimationService } from '../../../core/services/animation.service';

@Component({
  selector: 'thrive-mobile-navbar',template: `
  <div>
    <h1>Test Text</h1>
  </div>
  `,styleUrls: ['./mobile-navbar.component.scss']
})
export class MobileNavbarComponent implements OnInit {

  @Input('title') title: string;

  constructor(
  ) { }

  ngOnInit() {

  }

}