Angular 2 多槽嵌入答案

【问题标题】：Angular 2 Multiple Slot TransclusionAngular 2 多槽嵌入
【发布时间】：2017-02-04 01:44:43
【问题描述】：

从 RC 5 开始，以下语法适用于 Angular 2 中的多槽嵌入

这是带有选择器statement-card的模板组件

<div class="statement-card bottom-right-shadow">
    <div class="row">
        <div class="col-xs-12">
            <div class="statement-card-title">
                <!-- title -->
                <ng-content select="statement-card-title"></ng-content>
            </div>
        </div>
    </div>
    <div class="row statement-card-body">
        <div class="col-md-4">
            <!-- statment summary -->
            <ng-content select="statement-card-summary"></ng-content>
        </div>
        <div class="col-md-4">
            <!-- payment amount -->
            <ng-content select="statement-card-addition"></ng-content>
        </div>
        <div class="col-md-4">
            <!-- payment method -->
            <ng-content select="statement-card-payment-method"></ng-content>
        </div>
    </div>
    <div class="row statement-card-footer">
        <div class="col-md-4 col-md-offset-8">
            <ng-content select="statement-card-interactions"></ng-content>
        </div>
    </div>
</div>

这是用数据填充模板的组件之一

<statement-card>
    <statement-card-title>
        <div class="schedule-statement-title">Payment schedule</div>
    </statement-card-title>
    <statement-card-summary>
        <h4 class="statement-card-section-title">Payment frequency:</h4>
        <div>
            {{frequency}}
        </div>
        <div>
            Next payment: {{payment?.scheduledDate | date:'MMMM dd, yyyy'}}
        </div>
    </statement-card-summary>
    <statement-card-addition>
        <h4 class="statement-card-section-title">Payment amount:</h4>
        <div class="addition-line"><span>Amount</span><span>{{payment?.amount}}</span></div>
        <div class="addition-line"><span>Sales tax</span><span>{{payment?.salesTax}}</span></div>
        <hr class="addition-seperator" />
        <div class="addition-total"><span>Total</span><span>{{getPaymentTotal()}}</span></div>
    </statement-card-addition>
    <statement-card-payment-method>
        <h4 class="statement-card-section-title">Payment method:</h4>
        <img src="images/bank.png" width="48" height="48" class="payment-method-icon" />
        <div class="payment-method-summary">
            <div>Bank</div>
            <div>Account ending in  ••••••••••1234</div>
        </div>
    </statement-card-payment-method>
    <statement-card-interactions>
        <div class="row">
            <div class="col-md-6">
                <a href="#" class="pull-right">MAKE A PAYMENT</a>
            </div>
            <div class="col-md-6">
                <a href="#" class="pull-right">VIEW PAYMENT SCHEDULE</a>
            </div>
        </div>
    </statement-card-interactions>
</statement-card>

在 Angular 2 RC 5 及以下版本中，您可以在模板组件中指定带有 select 属性的 ng-content 标签，然后在特定组件中直接创建与 ng-content 标签中的 select 属性匹配的 html 标签，然后会将子 html 内容嵌入到 ng-content 标记中。

现在我已经升级到 Angular 2，它对所有的嵌入槽都抛出了这样的错误：

'statement-card-title' 不是已知元素： 1. 如果 'statement-card-title' 是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果 'statement-card-title' 是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的 '@NgModule.schema' 以禁止显示此消息。 (" [错误->] 付款时间表

我现在是否必须为所有的嵌入插槽制作一个单独的组件？？如果不是，我该如何修复我的组件，以便角度识别这是多重嵌入？

【问题讨论】：

标签： angular

【解决方案1】：

Angular 2 中的这个问题无法识别“statement-card-section-title”标签。 “statement-card-section-title”既不是指令也不是组件。解决此错误的一种快速方法是在模块中添加架构元数据属性，在模块文件中将值设置为 NO_ERRORS_SCHEMA。

@NgModule({
  ...,
  schemas:      [ NO_ERRORS_SCHEMA ] // add this line
})

【讨论】：

【解决方案2】：

解决此问题的另一种方法是将选择器更新为：

<ng-content select="[statement-card-title]"></ng-content>

并在你的组件中使用它：

<statement-card>
    <div statement-card-title>
        <div class="schedule-statement-title">Payment schedule</div>
    </div>
    <div statement-card-summary>
        <h4 class="statement-card-section-title">Payment frequency:</h4>
        (...)
    </div>
    (...)
</statement-card>

【讨论】：

【解决方案3】：

这是一个已知的“问题”。

你可以通过传递来修复它

 schemas:   [ CUSTOM_ELEMENTS_SCHEMA ],

到@NgModule(...) 明确告诉Angular2 它应该接受所有符合自定义元素名称方案的标签名称，即使组件不为您当前的Angular2 模块所知。

如果您将带有此选择器的组件添加到@NgModule(...) 的directives: [...]，那么Angular2 也不会再抱怨了。

更多详情请参见https://github.com/angular/angular/issues/11251。

【讨论】：