Angular 2 / Ionic 2，扩展离子组件解析错误：在此元素上匹配多个组件

Question

疑

我开发了一个Ionic 2应用程序，我想为已经部署在Ionic 2中的一些组件创建扩展。

实施例

例如，我创建了ngModule并尝试扩展ionic item 但保留其功能和与其他Ionic组件的互动。让<extended-ion-item>像<ion-item>一样工作，但更改<extended-ion-item>模板并添加新功能。

链接到具有重现问题的存储库：https://github.com/SonyStone/ionicExtend-issue

extended-item.ts

import { ChangeDetectionStrategy, Component, ElementRef, Renderer, Optional, ViewEncapsulation } from '@angular/core';

import { Config, Form, ItemReorder, Item } from 'ionic-angular';

import { CopyItem } from './copy-item';

@Component({
    selector: 'extended-ion-item',
    template:
    '<ng-content select="[item-left],ion-checkbox:not([item-right])"></ng-content>' +
    '<div class="item-inner">' +
    '<div class="input-wrapper">' +
    '<ng-content select="ion-label"></ng-content>' +
    '<ion-label *ngIf="_viewLabel">' +
    '<ng-content></ng-content>' +
    '</ion-label>' +
    '<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime,ion-range,[item-content]"></ng-content>' +
    '</div>' +
    '<ng-content select="[item-right],ion-radio,ion-toggle"></ng-content>' +
    '<ion-reorder *ngIf="_shouldHaveReorder"></ion-reorder>' +
    '</div>' +
    '<div class="button-effect"></div>',
    host: {
        'class': 'item'
    },
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
})
export class ExtendedItem extends Item {
    constructor(
        form: Form,
        config: Config,
        elementRef: ElementRef,
        renderer: Renderer,
        @Optional() reorder: ItemReorder
    ) {
        super(form, config, elementRef, renderer, reorder);
    }
}

module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { BrowserModule } from '@angular/platform-browser';

import { ExtendedItem } from './extended-item';
import { CopyItem } from './copy-item';


@NgModule({
    imports: [
        BrowserModule,
        IonicModule,
    ],
    exports: [
        ExtendedItem,
        CopyItem,
    ],
    declarations: [
        ExtendedItem,
        CopyItem,
    ],
})
export class IonicExtensionModule { }

问题

但是我收到了这个错误，真的不知道如何解决它。

console

Unhandled Promise rejection: Template parse errors:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: Item,ExtendedItem ("

<ion-content padding>
    [ERROR ->]<ion-item>
            <ion-avatar item-left>
                <ion-icon name="logo-markdown" style="color: #412159" ></ion"): HomePage@7:1

Answer 1

结果是离子2 npm模块中的问题，其中Item @Component元数据存储在Item.decorators对象中，所以当我扩展Item时，其元数据也继承了。 所以我创建class TempItem extends Item，清除元数据，然后class ExtendedItem extends TempItem，它现在正在运作！

import { ChangeDetectionStrategy, Component, ElementRef, Renderer, Optional, ViewEncapsulation } from '@angular/core';

import { Config, Form, ItemReorder, Item } from 'ionic-angular';

class TempItem extends Item {
    static decorators = undefined;
}

@Component({
    selector: 'extended-ion-item',
    templateUrl: './extended-item.html',
    host: {
        'class': 'item item-block'
    },
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
})
export class ExtendedItem extends TempItem {
    constructor(
        form: Form,
        config: Config,
        elementRef: ElementRef,
        renderer: Renderer,
        @Optional() reorder: ItemReorder
    ) {

        super(form, config, elementRef, renderer, reorder);
    }
}