Angular2 - 降级 ng2 组件的多内容答案

【问题标题】：Angular2 - Multi-Content with downgraded ng2-componentAngular2 - 降级 ng2 组件的多内容
【发布时间】：2016-06-26 15:38:41
【问题描述】：

我正在尝试使用角度升级机制将我们的 ng1 项目升级到 ng2。实际上我重写了一个组件，它提供了多个内容（角度为 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 个插槽。

【问题讨论】：

我这边也有同样的问题。看到这个 plunkr：plnkr.co/edit/E2bu6gRwAO4xXbYlC56q?p=info。看起来像个错误？！
难道<ng-content select="[con1]"> 应该是<ng-content select="[cont1]">？
这是本例中唯一的类型，在我的实现中我使用不同的选择器。

标签： angular

【解决方案1】：

Angular 4.0.0 已解决此问题：https://github.com/angular/angular/pull/12675

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

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

here's some code...

【讨论】：