Question

在Angular1中，假设我有my-directive这样的模板：

<li>First element</li>
<li>Second element</li>
<li>Third element</li>

假设我想像这样使用这个指令：

<ul>
    <li>Some unique content</li>
    <my-directive /> <!-- placeholder for the li elements I re-use -->
</ul>

使用选项replace: false进行渲染时，我得到以下内容：

<ul>
    <li>Some unique content</li>
    <my-directive> <!-- Nested li elements here are a problem -->
        <li>First element</li>
        <li>Second element</li>
        <li>Third element</li>
    </my-directive>
</ul>

这不是很好，因为我只想在插入指令时将li元素添加到列表中。

replace: true我收到错误：Template for directive 'myDirective' must have exactly one root element.

我理解为什么指令需要单个根元素，但Angular2也会有这个限制吗？

Answer 1

在Angular中，模板将添加到选择器匹配的标记中，模板可以包含任意数量的子项。

如果您不希望组件选择器与标签名称相等，则可以使用属性选择器

@Component({selector: '[my-component]' ...

<div my-component></div>

Answer 2

我刚测试过它，你可以拥有多个根元素

    @Component({
        selector: 'multiple-roots',
        template: `
            <div>
                First Root
            </div>
            <div>
                Second Root
            </div>
            <div>
                Third Root
            </div>
        `,
    })

例如，如果您注入组件并在html模板上调用它

<multiple-roots></multiple-roots>

它将呈现为：

<mutliple-roots>
   <div>
       First Root
   </div>
   <div>
       Second Root
   </div>
   <div>
       Third Root
   </div>
</mutliple-roots>

如需更好的参考，请查看Angular2's Tutorial Plunker

Angular2是否仅限于指令中的单个根元素？

2 个答案: