Angular 2
ネイティブWebコンポーネントをAngular 2で使用する

AngularJS CSS firebase HTML ionic2 ionic-framework JavaScript jQuery Node.js TypeScript

備考

Angular 2テンプレートでWebコンポーネントを使用すると、angleはWebコンポーネントのカスタムタグと一致するセレクタを持つコンポーネントを見つけようとします。これはもちろん不可能でエラーを投げます。

解決策は、コンポーネントを保持するモジュール内の「カスタム要素スキーマ」をインポートすることです。これにより、angleは任意のカスタムタグを受け取りますが、これはどのコンポーネントセレクタとも一致しません。

モジュールにカスタム要素スキーマを含める

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AboutComponent } from './about.component';

@NgModule({
    imports: [ CommonModule ],
    declarations: [ AboutComponent ],
    exports: [ AboutComponent ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

export class AboutModule { }

テンプレートでWebコンポーネントを使用する

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

@Component({
  selector: 'myapp-about',
  template: `<my-webcomponent></my-webcomponent>`
})
export class AboutComponent { }

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow