Angular2 CUSTOM_ELEMENTS_SCHEMA 不起作用

Question

我刚刚使用 ng2 cli 安装了一个 bearbones ng2 应用程序。在我的 AppModule 中，我添加了 schema: [ CUSTOM_ELEMENTS_SCHEMA ]，在我的 AppComponent 模板中，我添加了 <row></row>。但我越来越-

Unhandled Promise rejection: Template parse errors: 'row' is not a known element: 1. If 'row' is an Angular component, then verify that it is part of this module. 2. If 'row' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]

AppModule-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

AppComponent-

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

AppComponentTemplate-

<row></row>

就这么简单。这到底是怎么回事？

编辑：

下面的所有答案都令人满意，并提供了对问题的见解。 @yurzui 我特别喜欢您提供来源的回答。我希望我能给你所有被接受的答案！但我会选择@camaron 作为第一个并为我的问题提供直接解决方案。如果您通过 google 找到此问题，请给@yurzui、@camaron 和@Aravind +1 以帮助解决此问题！

Answer 1

您需要添加要由您的 AppModule

导入的 RowComponent

imports: [RowComponent]

编辑：

使用 NO_ERRORS_SCHEMA，这是因为 angular 正在尝试查找不存在的组件。

CUSTOM_ELEMENTS_SCHEMA 适用于选择器名称中带有 - 的组件。

Answer 2

如果你看一下更新日志 https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc5-2016-08-09

By default, Angular will error during parsing on unknown properties, even if they are on elements with a - in their name (aka custom elements). If you application is using custom elements, fill the new parameter @NgModule.schemas with the value [CUSTOM_ELEMENTS_SCHEMA].

那么你可以理解你需要有带有 - 分隔符的标签

if (tagName.indexOf('-') > -1) {
      if (tagName === 'ng-container' || tagName === 'ng-content') {
        return false;
      }

      if (schemaMetas.some((schema) => schema.name === CUSTOM_ELEMENTS_SCHEMA.name)) {
        // Can't tell now as we don't know which properties a custom element will get
        // once it is instantiated
        return true;
      }
}

https://github.com/angular/angular/blob/2.4.8/modules/%40angular/compiler/src/schema/dom_element_schema_registry.ts#L290

所以像 my-row 这样的东西应该可以工作

Answer 3

以下是你的错误

您只导入了 AppComponent，但它没有任何以 <row> 作为模板的元素。
CUSTOM_ELEMENTS_SCHEMA 在应用程序开发期间不需要使用，因为它用于隐藏在解析模板时发生的错误（如您的错误描述中所述).
<app-root> 是您的 AppComponent 的选择器，但是您在 AppComponent 的 html 中使用了 <row>。

根据您的要求，我可以提出各种修复建议。评论你想要的结果，我会根据他们更新答案。

Angular2 CUSTOM_ELEMENTS_SCHEMA 不起作用

Angular2 CUSTOM_ELEMENTS_SCHEMA Doesn't Work

angular

angular-components