Angular 2：在动态html上应用指令

Question

我正在创建一个编辑单个字段的指令。这个想法很简单，我将一个指令应用于我想要编辑的元素，如下所示：

<div edit-field>
    blabla
</div>

我的指令会在字段旁边添加一个按钮，当用户点击它时，它会将字段转换为输入。

要做到这一点，我需要更改HTML。问题是我的按钮和输入需要应用指令。

以下是我到目前为止所做的一些代码：

private editButton: string =
    `
        <button md-button>
            Edit
        </button>
    `;

private element: HTMLElement;

constructor(el: ElementRef) {
    this.element = el.nativeElement;
}

ngOnInit() {
    this.element.innerHTML = this.element.innerHTML + this.editButton;
}

如您所见，该按钮具有md-button指令。当我检查结果时，指令不会被应用。

我看到一些关于动态组件加载器的帖子，但我无法弄清楚如何在我的情况下应用它。

欢迎任何提示/帮助：）