web-dev-qa-db-ja.com

Angular2 CUSTOM_ELEMENTS_SCHEMAが機能しない

Ng2 cliを使用してbearbones ng2アプリをインストールしました。 AppModuleにschema: [ CUSTOM_ELEMENTS_SCHEMA ]を追加し、AppComponentテンプレートに<row></row>を追加しました。しかし、私は-

未処理のPromise拒否：テンプレート解析エラー：「行」は既知の要素ではありません：1.「行」がAngularコンポーネントである場合、それがこのモジュールの一部であることを確認してください。2。 'row'はWebコンポーネントであり、このコンポーネントの '@ NgModule.schemas'に "CUSTOM_ELEMENTS_SCHEMA"を追加して、このメッセージを抑制します（ "[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を与えてください。

angularangular-components
7
micah

RowComponentによってインポートされるAppModuleを追加する必要があります

imports: [RowComponent]

編集：

使用する NO_ERRORS_SCHEMA、これはangularが存在しないコンポーネントを見つけようとしているためです。

CUSTOM_ELEMENTS_SCHEMAは、-セレクター名。

12
dlcardozo

Changelogを見ると https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc5-2016-08-09

デフォルトでは、Angularは、名前に-が含まれる要素にある場合でも不明なプロパティの解析中にエラーになります（aka customelements）。アプリケーションがカスタム要素を使用している場合、新しいパラメーター@ NgModule.schemasに値[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#L29

my-rowのようなものが機能するはずです

6
yurzui

以下はあなたの間違いです

  1. AppComponentのみをインポートしましたが、<row>をテンプレートとする要素がありません。
  2. CUSTOM_ELEMENTS_SCHEMAテンプレートの解析中に発生するエラーを非表示にするために使用されるため、アプリケーション開発中に使用する必要はありません（エラーの説明にあるとおり）。
  3. <app-root>はAppComponentのセレクターですが、AppComponentのHTMLで<row>を使用しています。

あなたの要件に基づいて、私はさまざまな修正で提案できます。あなたの望ましい結果をコメントしてください、そして私はそれらに基づいて答えを更新します。

3
Aravind