Question

从RC 5开始，以下语法适用于Angular 2中的多个插槽转换

这是带有选择器#include <ESP8266WiFi.h> const char* ssid = "your-ssid"; const char* password = "your-password"; const char* host = "data.sparkfun.com"; const char* streamId = "...................."; const char* privateKey = "...................."; void setup() { Serial.begin(115200); delay(10); // We start by connecting to a WiFi network Serial.println(); Serial.println(); Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(""); Serial.println("WiFi connected"); Serial.println("IP address: "); Serial.println(WiFi.localIP()); } int value = 0; void loop() { delay(5000); ++value; Serial.print("connecting to "); Serial.println(host); // Use WiFiClient class to create TCP connections WiFiClient client; const int httpPort = 80; if (!client.connect(host, httpPort)) { Serial.println("connection failed"); return; } // We now create a URI for the request String url = "/input/"; url += streamId; url += "?private_key="; url += privateKey; url += "&value="; url += value; Serial.print("Requesting URL: "); Serial.println(url); // This will send the request to the server client.print(String("GET ") + url + " HTTP/1.1\r\n" + "Host: " + host + "\r\n" + "Connection: close\r\n\r\n"); unsigned long timeout = millis(); while (client.available() == 0) { if (millis() - timeout > 5000) { Serial.println(">>> Client Timeout !"); client.stop(); return; } } // Read all the lines of the reply from server and print them to Serial while(client.available()){ String line = client.readStringUntil('\r'); Serial.print(line); } Serial.println(); Serial.println("closing connection"); }

的模板组件

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>

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

现在我已经升级到角度2，它会为所有的翻译插槽抛出这样的错误：

＆＃39;语句卡标题＆＃39;不是一个已知的元素： 1.如果＆＃39;声明卡片标题＆＃39;是一个Angular组件，然后验证它是否是此模块的一部分。 2.如果＆＃39;声明卡片标题＆＃39;是一个Web组件，然后添加＆＃34; CUSTOM_ELEMENTS_SCHEMA＆＃34;到＆＃39; @ NgModule.schema＆＃39;此组件禁止此消息。（＆＃34; [错误 - ＆gt;] 付款时间表

我现在必须为所有的翻译插槽制作一个单独的组件吗？如果不是如何修复我的组件，以便角度识别这是多次转换？

Answer 1

这是一个已知问题＆＃34;。

您可以通过传递

来修复它

 schemas:   [ CUSTOM_ELEMENTS_SCHEMA ],

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

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

有关详细信息，另请参阅https://github.com/angular/angular/issues/11251。

Answer 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>

Answer 3

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

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

角度2多槽插值

3 个答案: