Question

我有一个组件，它接受一个动态模板，如下所示：

<ion-list>
  <ion-item-sliding *ngFor="let entity of entityList" #item>
    <ion-item (click)="navigateToDetail(entity.id)">
      <template [ngTemplateOutlet]="template" [ngOutletContext]="{entity: entity}"></template>
    </ion-item>
    <ion-item-options side="right">
      <button ion-button color="danger"  *ngIf="config && config.canDelete" (click)="delete(entity.id)">
        <ion-icon name="trash"></ion-icon>Delete
      </button>
      <button ion-button color="dark" >
        <ion-icon name="more"></ion-icon>More
      </button>
    </ion-item-options>
  </ion-item-sliding>
  <ion-list-header>
    <button *ngIf="config && config.canCreate" (click)="create()"
            ion-button full color="secondary">
      Create New<ion-icon name="add"></ion-icon>
    </button>
  </ion-list-header>
</ion-list>

并且打字稿看起来像这样：

export class PageListBaseComponent<T extends IHasId> {

    @Input() template: TemplateRef<any>;
    @Input() detailPageType: any;
    @Input() config: PageListConfiguration
    @Input() set baseProvider(provider: ProviderBase<T>) {
        provider.getList().subscribe(entities =>  {
            this.entityList = entities;
            console.log(entities);
        });
    }

    public entityList: T[];

    constructor(public navCtrl: NavController, public navParams: NavParams) {
        console.log("ctor");
    }

    create() {
        if (this.config && this.config.canCreate) {
            //TODO: initialize entity
            let entity = {}
            this.navCtrl.push(this.detailPageType, { entity });
        }
    }

    delete(id: number) {
        console.log(id);

        if(this.config && this.config.canDelete)
        {
            this.baseProvider.deleteById(id).subscribe(result => {
                console.log(result);
            });
        }
    }

    navigateToDetail(id: number) {
        this.navCtrl.push(this.detailPageType, { id })
    }
}

然后我有一个看起来像这样的模板：

<template #myTemplate let-entity="entity">
  <ion-item>
    <ion-avatar item-left>
      <img src="http://modexenergy.com/wp-content/themes/modex_wp/img/avatar.png">
    </ion-avatar>
    <h2>{{ entity.email }}</h2>
    <ion-icon name="arrow-forward" item-right></ion-icon>
  </ion-item>
</template>

我的问题是<ion-item>现在我需要使用它两次，我不想这样做。出于某种原因，如果我尝试动态渲染项目，它们不会出现在列表中，所以我需要保留<ion-item>包装模板，没问题，除了指令不尊重父类。这意味着如果我在模板中使用item-left指令，并且模板不包含<ion-item>，则忽略我的指令。

我可以做些什么来解决这个问题，如果我可以使用两者都可以解决这个问题，但如果没有，有没有办法让第一个<ion-item>没有风格？

Angular 2动态模板指令不起作用

0 个答案: