Angular2-将子组件引用到父模板中作为＆＃34; string＆＃34;动态创建它们

Question

通过将所需模板构造为字符串并将其发送到动态组件构建器来动态创建标头组件。

使用相同的组件HtmlOutlet directive，

从this plunker引用创建的动态组件

传递给此组件的字符串构造为：

    prepareHeaderHtml(): string {
            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;">
                                          <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组件和Notification组件，它将是Header组件的子组件。

两个组件都可以使用与Header组件相同的方式单独创建。

问题：

如何将警报和通知组件引用到标头组件中，以便与标头一起动态创建警报和通知组件。