Angular2 CUSTOM_ELEMENTS_SCHEMA不起作用

mic*_*cah 7 angular-components angular

我刚刚使用ng2 cli安装了一个bearbones ng2 app.在我的AppModule添加中schema: [ CUSTOM_ELEMENTS_SCHEMA ],在我的AppComponent模板中,我有<row></row>.但我得到 -

未处理的Promise拒绝:模板解析错误:'row'不是已知元素:1.如果'row'是Angular组件,则验证它是否是此模块的一部分.2.如果'row'是Web组件,则将"CUSTOM_ELEMENTS_SCHEMA"添加到此组件的'@NgModule.schemas'以禁止显示此消息.("[错误 - >]

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 { }
Run Code Online (Sandbox Code Playgroud)

AppComponent-

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

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

AppComponentTemplate-

<row></row>
Run Code Online (Sandbox Code Playgroud)

这真的很简单.到底他妈发生了什么?

编辑:

以下所有答案都令人满意,并提供了对问题的深入了解.@yurzui我特别喜欢你提供源代码的答案.我希望我能给你所有接受的答案!但我会选择@camaron作为第一个并直接解决我的问题.如果你通过谷歌找到这个问题,请给@yurzui,@camaron和@Aravind一个+1来帮助解决这个问题!

dlc*_*ozo 12

您需要添加RowComponent要导入的AppModule

imports: [RowComponent]

编辑:

使用NO_ERRORS_SCHEMA,这是因为angular正试图找到一个不存在的组件.

CUSTOM_ELEMENTS_SCHEMA用于-选择器名称中包含a的组件.


yur*_*zui 5

如果你看一下changelog,请访问https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc5-2016-08-09

默认情况下,Angular在解析未知属性时会出错,即使它们位于名称中的 元素(也就是自定义 元素)上.如果应用程序使用自定义元素,请使用值[CUSTOM_ELEMENTS_SCHEMA]填充新参数@ NgModule.schemas.

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

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;
      }
}
Run Code Online (Sandbox Code Playgroud)

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

所以my-row应该有所作为