如何分别包装ng-content元素？

Question

我想用由父级控制的html分别包装每个ng-content元素。

示例：

<parent-component>
    <span>Child 1</span>
    <span>Child 2</span>
    <span>Child 3</span>
</parent-component>

所需结果：

<parent-component>
    <ul>
        <li>
            <div class="item">
                <span>Child 1</span>
            </div>
        </li>
        <li>
            <div class="item">
                <span>Child 2</span>
            </div>
        </li>
        <li>
            <div class="item">
                <span>Child 3</span>
            </div>
        </li>
    </ul>
</parent-component>

有人知道如何处理吗？