Angular 2/Ionic 2，扩展Ionic组件解析错误:此元素上匹配了多个组件

Question

怀疑

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

示例

例如，我创建ngModule并尝试扩展离子项目但保留其功能性和与其他离子组分的相互作用。使<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

它解决了ionic 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);
}
}