如何创建一个自定义指令，将模板包装在其他元素中（Angular 2）？

Question

我是Angular 2的新手。我想创建一个自定义结构指令，将模板包装在一组html元素中。例如，在下面的模板中使用* formField：

<input *formField type='text' formControlName="firstName" class='form-control' id='firstName' placeholder='First Name' />

应如下所示：

<div class='form-group'>
    <label for='firstName' class='col-sm-2 control-label'>First Name</label>
    <div class='col-sm-7'>
        <input type='text' formControlName="firstName" class='form-control' id='firstName' placeholder='First Name' />
    </div>
</div>

Answer 1

我会使用一个组件。似乎适合您要完成的任务。指令应该用于操纵元素的行为，但你不会这样做。您只是尝试用其他元素包装该元素，但不操纵元素本身。