RC4より後のバージョン用の角度2のカスタムデコレータ「複数のコンポーネント」を除外

Question

私はRC4以前のバージョン用に開発されたionic2-autocompleteのIonic 2コンポーネントを使用しています。それをAngular 2 finalに変換します。

元のデザインの一部として、templateまたはtemplateUrlを受け取るカスタムデコレータAutoCompleteItemを使用して、デフォルトのテンプレートを上書きするようにしました。 このデコレータのソースコードはhereです。

ご覧のとおり、デコレータを使用してコンポーネントに必要な属性の一部を保持し、ユーザーが必要に応じてコンポーネントを設計できるようにしました。以前のバージョンで完全に働いた

import {AutoCompleteItem, AutoCompleteItemComponent} from 'ionic2-auto-complete'; 

@AutoCompleteItem({ 
    template : `<img src="build/images/flags/{{data.name}}.png" class="flag" /> <span [innerHTML]="data.name | boldprefix:keyword"></span>`, 
}) 
export class CompTestItem extends AutoCompleteItemComponent{ 
} 

は（私もdeclerationsにCompTestItemを追加しました：

さて、私はドキュメントに書いた、まったく同じ手順に従って、私が使用してカスタムテンプレートを実装してみましたアレイ）。

しかし、いくつかの理由で、私は今、次の例外に遭遇：

polyfills.js:3 Unhandled Promise rejection: Template parse errors: More than one component: AutoCompleteItemComponent,CompTestItem ("
[ERROR ->] ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: More than one component: AutoCompleteItemComponent,CompTestItem ("
[ERROR ->]http://localhost:8101/build/main.js:19480:19) at RuntimeCompiler._compileTemplate (http://localhost:8101/build/main.js:27855:51) at http://localhost:8101/build/main.js:27777:83 at Set.forEach (native) at compile (http://localhost:8101/build/main.js:27777:47) at t.invoke (http://localhost:8101/build/polyfills.js:3:13400) at e.run (http://localhost:8101/build/polyfills.js:3:10787) at http://localhost:8101/build/polyfills.js:3:8889 at t.invokeTask (http://localhost:8101/build/polyfills.js:3:14029) at e.runTask (http://localhost:8101/build/polyfills.js:3:11389)o @ polyfills.js:3r @ polyfills.js:3i @ polyfills.js:3 polyfills.js:3 Error: Uncaught (in promise): Error: Template parse errors:(…)o @ polyfills.js:3r @ polyfills.js:3i @ polyfills.js:3

を私は本当に手掛かり理由を持っていません。誰でもこのカスタムデコレータがこのバージョンのAngularで動作しない理由を知ることができますか？ なぜ、私は複数のコンポーネントを持っていると言いますか？

ありがとうございます！

Answer 1

上記のコメントをより明確に説明します。デコレータを見てください

export function AutoCompleteItem(config: AutoCompleteItemMetadata) { 
    return function(cls: any) { 
    const _reflect: any = Reflect; 
    let annotations = _reflect.getMetadata('annotations', cls) || []; 
    let extendedConfig: any = config; 

    extendedConfig.selector = 'ion-auto-complete-item'; 
    annotations.push(new Component(extendedConfig)); 
    _reflect.defineMetadata('annotations', annotations, cls); 

    return cls; 
    }; 
} 

すべてのコンポーネントのセレクタをion-auto-complete-itemに設定しています。したがってこの場合

@AutoCompleteItem({ 
    template: defaultTemplate 
}) 
export class AutoCompleteItemComponent {} 

@AutoCompleteItem({}) 
export class ExtendedComponent extends AutoCompleteComponent {} 

これで、同じセレクタを持つ2つのコンポーネントがあります。今これだけで問題はありません。しかし、彼らの2人が一緒に同じ部屋に入ると、Angularはどちらを使うかを決めることができません。

これは、現在の制限よりも小さいため、これは以前のRC4では問題がない可能性があります。あなたがdirectivesを使用する前に成分のみ

@Component({ 
    directives: [ AutoCompleteItemComponent ] 
}) 
class SomeComponent {} 

にスコープされているそれはあなたが同じコンポーネントでAutoCompleteItemComponentとExtendedComponentを使用することはおそらくめったにありません。紛争はない。

しかし、私たちはモジュールを使用していないので、コンポーネントのスコープは少し広くなり、これにより多くの競合が生じます。

たぶん、あなたは別のモジュール上記の場合

@NgModule({ 
    imports: [ FormsModule, CommonModule ], 
    declarations: [ AutoCompleteItemComponent ], 
    exports: [ AutoCompleteItemComponent ] 
}) 
class SharedModule {} 

@NgModule({ 
    imports: [ SharedModule ], 
    declarations: [ ExtendedComponent, ComponentThatUsesExendedComponent ] 
    exports: [ ComponentThatUsesExtendedComponent ] 
}) 
class OtherModule {} 

にインポート共有モジュールを持っている今AutoComponentItemComponentとExtendedComponentが一緒に同じ部屋にいるので、あなたは、エラーが発生します。アンギュラはComponentThatUsesExendedComponent内で使用するかを把握することはできませんので、あなたは、私はあなただけを確認するが、これを修正するために何ができるかわからないんだけど、この時点でエラー

More than one component AutoCompleteItemComponent, ExtendedComponent

を取得している二つの成分明示的にも暗黙的にも、同じ部屋には決して存在しません。さらに難しいのは、コンポーネントクラスを1つのモジュールでしか宣言できないということです。