Angular2 - 降级 ng2 组件的多内容

Question

我正在尝试使用 Angular 升级机制将我们的 ng1 项目升级到 ng2。实际上，我重写了一个组件，它提供了多个内容( Angular 为 1.5 的多重包含/插槽)。

我的问题是，它可以在一个组件中使用多内容，这将降级为在 ng1 环境中使用它。

我从昨天开始就开始尝试让它工作。如果我使用一个 ng-content 元素，它会起作用，但如果我尝试使用两个或更多 ng-content，我总是得到一个错误，我使用 x ng-content 但提供了 1 个插槽。

我的组件看起来像

@Component({
selector: NgContentTest.UPGRADE_ELEMENT_NAME,
template: `
    <div>
        <div style="background-color:red ">
            <ng-content select="[con1]"></ng-content>
        </div>

        <div style="background-color: yellow; display: block;height: 55px;">
            <ng-content select="[cont2]"></ng-content>
        </div>
    </div>
`
})
export class NgContentTest {
    static UPGRADE_ELEMENT_NAME = 'ngContentTest';
}

Consumer 是一个带有以下模板示例的 ng1 指令:

<ng-content-test> 
        <div cont1>
           Content - 1 
        </div>
        <div cont2>
            Content - 2
        </div>
</ng-content-test>

错误:组件 NgContentTest 有 2 个元素，但只提供了 1 个槽。

Answer 1

Angular 4.0.0 修复了这个问题:https://github.com/angular/angular/pull/12675

我发布了一个plunkr在底部突出了问题。

SO requires some code为了直接链接到 plunkr，显示 ng1/ng2 混合应用程序所需的代码在此答案的上下文中没有真正意义，所以...

here's some code...