Javascript 角度-将组件动态注入另一个组件#x27；s模板

我正在研究一个角度分量。这个组件将是网站的标题，它将出现在每个页面上，包含不同的内容（但不仅仅是字符串，这就是问题所在）

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

在AngularJS 1中，我可以使用，但在AngularJS中，这是不可用的，我不知道如何解决这个问题

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

服务 组成部分 模板

{{info}}
{{hint}}

问题 我想为输入放置100%的动态内容（尤其是

标题

），例如：

我的进度，

另一页：

My Profile Edit

所以我想在一个地方定义一个header组件，但是如果我想的话，我也希望任何未知数量的其他组件能够注入到header中

我已经找到了一些解决这个问题的方法，但是没有什么是完全动态的。因为我的项目中有数百个可重用组件（属性指令），所以我不能将它们全部放入头组件的模板中，每个组件都有一个条件。这将是非常沉重和难以更新的

所以我在寻找一个100%动态的解决方案。100%灵活的收割台

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>