Question

我有一个列表，我将在多个页面上重复使用。为此，我决定为它创建一个单独的组件。但当我在另一个内部使用此组件时，没有任何反应，屏幕变为空白。

应用模块：

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

import { MyApp } from './app.component';
import { EventsList } from '../components/events-list/events-list.component';
import { TestPage } from '../components/test-page/test-page.component';

@NgModule({
  declarations: [
    MyApp,
    EventsList,
    TestPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    EventsList,
    TestPage
  ],
  providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule {}

TestPage（我用来测试可重用的组件）：

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

@Component({
  templateUrl: 'test-page.html'
})
export class TestPage {

  events: any[] = [...]; // Here I use some dummy

}

TestPage模板：

<ion-content>
  <events-list [events]="events"></events-list>
</ion-content>

EventsList（可重用组件）：

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

@Component({
  selector: 'events-list',
  templateUrl: 'events-list.html'
})
export class EventsList {

  @Input() events: any[];

}

EventsList模板：

<ion-list [virtualScroll]="events" approxItemHeight="'411px'">

  <ion-card *virtualItem="let event">

    <ion-img [src]="(event.cover ? event.cover.source : 'http://ionicframework.com/dist/preview-app/www/assets/img/advance-card-map-mario.png')" class="event-cover"></ion-img>

    <ion-fab right top>
      <button [ngSwitch]="event.rsvp_status" ion-fab>
          <ion-icon *ngSwitchCase="'attending'" name="checkmark"></ion-icon>
          <ion-icon *ngSwitchCase="'interested' || 'maybe'" name="star"></ion-icon>
          <ion-icon *ngSwitchCase="'declined'" name="close"></ion-icon>
          <ion-icon *ngSwitchCase="'not_replied'" name="help"></ion-icon>
          <ion-icon *ngSwitchDefault name="help"></ion-icon>
        </button>
    </ion-fab>

    <ion-item class="event-header">
      <h2 class="event-name">{{ event.name }}</h2>
      <p>
        <ion-icon name="clock"></ion-icon>
        {{ event.start_time | amCalendar }}
      </p>
    </ion-item>

    <ion-item>
      <ion-avatar item-left>
        <ion-img [src]="(event.owner.picture ? event.owner.picture.data.url : 'http://www.gravatar.com/avatar?d=mm&s=140')"></ion-img>
      </ion-avatar>
      <h2 class="subscription-name">{{ event.owner.name }}</h2>
      <p *ngIf="event.place">
        <ion-icon name="pin"></ion-icon>
        {{ event.place.name || event.place.location.street || 'Local sem nome' }}
      </p>
    </ion-item>

    <ion-item class="event-footer">
      <span item-left>{{ event.attending_count }}</span>
      <span item-left>
            <ion-icon name="checkmark" class="event-attending"></ion-icon>
        </span>
      <span item-left>745</span>
      <span item-left>
            <ion-icon name="star" class="event-interested"></ion-icon>
        </span>
      <button ion-button icon-left clear item-right>
          <ion-icon name="add-circle"></ion-icon>
          DETALHES
        </button>
    </ion-item>

  </ion-card>

</ion-list>

一些系统信息：

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v7.2.0
Xcode version: Not installed

我错过了什么？

Angular 2和Ionic 2：可重用的组件列表

0 个答案: