动态插入组件，然后在中间插入 html 代码 [关闭]

Question

关闭。 这个问题需要调试细节。 它目前不接受答案。

---

编辑问题以包含所需的行为、特定问题或错误以及重现问题所需的最短代码。 这将帮助其他人回答问题。

20 分钟前关闭。

这篇文章在4 分钟前被编辑并提交审核。

改进这个问题

我正在尝试在 Angular 中编写一个内容管理系统。 它从 firestore 中提取模板代码，如下所示：

<app-header></app-header>
  <app-header-gallery></app-header-gallery>
  <ion-content>
  <div class="container">
    [[mainContent]]  
    <app-slider></app-slider>
  </div></ion-content>
  <app-testimonial></app-testimonial>
  <app-footer></app-footer>

每个组件都被动态插入到页面中。 [[mainContent]] 被基本的 html 代码取代。 像这样的东西：

<h2>Headline 1</h2>
<h3>Headline 2/h3>
<p>Basic Content</p>

我已经插入组件，但我不知道如何将 html 代码插入它应该在的位置。

我能猜到如何做到这一点的唯一两种方法是将 html 代码转换为动态组件并将其与其他组件一起插入，或者将每个组件转换为 html 并将所有内容连接成一个字符串，这样它就会建立起来整个 html。 到目前为止，我还没有成功地工作过任何一种方式。

请善待。 我的代码很杂乱，因为我一直在尝试我在网上找到的不同的东西，但到目前为止它们都没有奏效。

页面.ts

import { ContentService } from 'src/app/services/content.service';
import { Component, ComponentFactoryResolver, EmbeddedViewRef, OnInit, Renderer2, ViewChild, ViewContainerRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { HeaderComponent } from 'src/app/components/header/header.component';
import { DynamicComponentService } from "src/app/common/dynamic-component.service";

@Component({
  selector: 'app-page',
  templateUrl: './page.page.html',
  styleUrls: ['./page.page.scss'],
})
export class PagePage implements OnInit {

  @ViewChild("container", { read: ViewContainerRef, static: true })
  container: ViewContainerRef;

  pageUrl: any;
  pageArray = [];
  template: string;
  page: string;
  codeArray = [];
  innerContent: string;
  data: SafeHtml;
  cmsContent: string;
  renderedHtml: string;

  constructor(
    private actRoute: ActivatedRoute,
    private contentService: ContentService,
    public sanitizer: DomSanitizer,
    private componentFactoryResolver: ComponentFactoryResolver,
    private componentService: DynamicComponentService,
    private renderer: Renderer2
  ) { }

  ngOnInit() {

    this.pageUrl = this.actRoute.snapshot.paramMap.get('pageUrl');
    this.contentService.viewPageByURL(this.pageUrl).subscribe(res => {
      this.pageArray = res;
      this.data = "";
      this.contentService.getTemplate(this.pageArray[0]['template']).subscribe(res2 => {
        let page = res2['body'];
        this.page = page.replace("[[mainContent]]",this.pageArray[0]['body']);
        this.codeArray = this.page.split('\n');
        this.codeArray.forEach(element => {
          this.innerContent = element;
          if (element.includes('<app-')) {
            // insert the component into the page
            let mySubString = element.substring(
              element.indexOf("</") + 2,
              element.lastIndexOf(">")
              );
            this.componentService
              .getComponentBySelector(mySubString, () =>
                import("src/app/components/imports.module").then(m => m.SharedModule)
              )
              .then(componentRef => {
                this.container.insert(componentRef.hostView);
                // this.cmsContent += (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
              });
          } else {
            // insert the html code into the page, this is what I can't get working!
            // this.cmsContent += this.pageArray[0]['body'];

          }
          this.innerContent = element;
          this.data = this.sanitizer.bypassSecurityTrustHtml(this.innerContent);
        });
      })
    })

  }

}

页.html

<app-menu></app-menu>
<ion-content >
  <div #container [innerHTML]="cmsContent"></div>
</ion-content>