Angular-将组件动态注入到另一个组件的模板

Question

我正在研究Angular组件。该组件将成为网站的标题，它将出现在具有不同内容（但不仅是字符串，而且这是问题）的每个页面上。

我可以动态地传递字符串，甚至可以传递原始HTML，但是这些组件没有呈现，它们被剥离了。

在AngularJS 1中，我可以使用$compile，但是在Angular中，这不可用，我也不知道如何解决这个问题。

这应该是一个非常简单的步骤，我可以在5分钟内用原始Javascript和10行代码解决此问题，这是一个简单的DOM更改，但是在Angular中，这似乎是不可能的，我不愿意不知道为什么这么难。

服务

import { Injectable } from '@angular/core';
import {BehaviorSubject} from "rxjs";
import {environment} from "../../environments/environment";

@Injectable({
  providedIn: 'root'
})
export class ContentHeaderService {

  private titleSource = new BehaviorSubject('');
  private infoSource = new BehaviorSubject('');
  private hintSource = new BehaviorSubject('');
  private backgroundSource = new BehaviorSubject(environment.contentHeaderDefaultBg);
  title = this.titleSource.asObservable();
  info = this.infoSource.asObservable();
  hint = this.hintSource.asObservable();
  background = this.backgroundSource.asObservable();

  constructor() { }

  changeTitle(str: string) {
    this.titleSource.next(str)
  }

  changeInfo(str: string) {
    this.titleSource.next(str)
  }

  changeHint(str: string) {
    this.titleSource.next(str)
  }

  changeBackground(str: string) {
    this.backgroundSource.next(str)
  }
}

组件

import { Component, OnInit } from '@angular/core';
import {ContentHeaderService} from "../../services/content-header.service";

@Component({
  selector: 'app-content-header',
  templateUrl: './content-header.component.html',
  styleUrls: ['./content-header.component.scss']
})
export class ContentHeaderComponent implements OnInit {
  background: string;
  title: string;
  info: string;
  hint: string;

  constructor(private data: ContentHeaderService) {

  }

  ngOnInit() {
    this.data.background.subscribe(background => this.background = background)
    this.data.title.subscribe(title => this.title = title)
    this.data.info.subscribe(info => this.info = info)
    this.data.hint.subscribe(hint => this.hint = hint)
  }

}

模板

<div class="content-header position-relative bg-light-blue text-center text-sm-left pattern-bg" [ngStyle]="{'background-image': 'url(' + background + ')'}">
  <div class="py-5 " style="">
    <div class="container">
      <h1 class="mb-0" [innerHTML]="title"></h1>
      <div class="clearfix">
        <span class="text-light" [hidden]="!info"><span><i class="fas fa-info-circle"></i> {{info}}</span></span>
        <span class="text-light" [hidden]="!info"><span><i class="fas fas fa-lightbulb"></i> {{hint}}</span></span>
      </div>
    </div>
  </div>
</div>

问题

我想为输入（尤其是title）放置100％的动态内容，例如：

My Progress, <mdb-progress value="0" min="0" max="50" aria-valuenow="15" aria-valuemin="0" aria-valuemax="50"></mdb-progress>

另一页：

My Profile <mdb-badge color="red">Edit</mdb-badge>

所以我想在一个地方定义一个标头组件，但是如果我想要的话，还希望能够将任意数量的其他未知组件注入标头。

我找到了两种解决方法，但没有什么是完全动态的。由于我的项目中有数百个可重用的组件（属性指令），因此无法将所有组件都放入带有条件的标头组件模板中。那将是非常沉重且难以更新。

所以我正在寻找100％动态的解决方案。 100％灵活的标头。