angular - Angular2 - bir bileşeni farklı bir şablona yüklemek (dinamik olarak oluşturmak için string olarak geçilen)

Dinamik bir başlık oluşturmaya çalışıyorum, başlık şablonunu 'string' olarak dinamik bileşenime inşa edip geçiriyor ve başlığı derleyip yüklüyor. Gereksinimim, başlık bileşen şablon dizesinin içinde başka bir bileşeni çağırmak ve yüklemektir.

header.component.ts:

import { Component, OnInit, Input } from '@angular/core';

import { AlertComponent } from './alert.component';

@Component({
    selector: 'header', 
    template: `<html-outlet [html]="value"></html-outlet>`,
})
export class HeaderComponent implements OnInit {

@Input()
header = Object;
@Input()
headerData = Object;
headerObj = new Array<any>();
property = new Array<any>();
dataObj = new Array<any>();
dataProperty = new Array<any>();
value: string;

ngOnInit() {
    this.headerObj = JSON.parse(JSON.stringify(this.header));
    this.dataObj = JSON.parse(JSON.stringify(this.headerData));
    this.value = this.prepareHeaderHtml();
}


prepareHeaderHtml(): string {
    this.dataProperty = this.dataObj;
    let user = this.dataProperty[0]["username"];
    console.log("username : "+ user)
    this.property = this.headerObj;
    let headerTemplate = '<div class="header">';
    for (let headerValues in this.property) {
        let headerValue = this.property[0]["value"];
        headerTemplate += `<ul>
                                <span class="fa fa-home"></span>&nbsp;
                                ${headerValue}
                                <span class="title" style="float: right; margin-right: 10px;">
                                    <alert></alert>
                                    <img class="notify-circle" src="img/notify_3.png">&nbsp; ${user} &nbsp;
                                    <img class="user-circle" src="img/profile.png"></span>
                        </ul>`;
    }
    headerTemplate += '</div>';
    return headerTemplate
}

}

alert.component.ts:

import { Component } from '@angular/core';

@Component({
    selector: 'alert',
    template: `<span><img class="alert-circle" src="img/alert_3.png">&nbsp;</span>`,     
})
export class AlertComponent {}
}

Başlık şablon dizgesini dinamik bileşen sınıfına geçirdiğimde

<html-outlet [html]="value"></html-outlet>

Tarayıcı konsolunda şu hatayı alıyorum:

HATA: Yakalanmamış (promiste): Hata: Şablon çözümleme hataları: 'alert' bilinen bir element değil: 1. Eğer 'alert' bir Angular bileşeni ise, bu modülün bir parçası olduğundan emin olun. 2. Eğer 'alert' bir Web Bileşeni ise, bu mesajı bastırmak için bu bileşenin '@NgModule.schemas' kısmına "CUSTOM_ELEMENTS_SCHEMA" ekleyin. ("an class=\"title\" style=\"float: right; margin-right: 10px;\"> [HATA ->]<alert></alert> <img class=\"notify-circle\" src=\"img/notify_3."): DynamicComponent@4:40

AlertComponent'i app.modules.ts dosyasında MenuComponent ve HtmlOutlet ile birlikte tanımladım ve içe aktardım. Ayrıca AlertComponent'i dinamik builder bileşeninde de içe aktardım.

Soru:

Biri bana, başlık şablonunda string olarak oluşturulmuş <alert></alert> öğesinin tanınmasını sağlayacak şekilde bunu nasıl çalıştıracağımı gösterebilir mi?

Ancak doğrudan dizi şablonu olarak geçildiğinde, string olarak değil, sorunsuz çalışır.