Question

我已将我的离子应用从beta 11更新为rc0。所以这意味着我已经从angular2 rc4切换到angular2 stable。

我正在尝试使用我从 home-page.html

调用的自定义组件

<slider-component [title]="sliderTitle[0]" [songs]="recentlyViewedSongs" [viewId]="RecentViewId" ></slider-component>

在 slider-component.ts 中，我有一个始终未定义的console.log

export class SliderComponent {

    @Input() title: string = "";
    @Input() songs: any; 
    @Input() viewId: any = []; //stores id of songs to be shown

    constructor(
        public nav: NavController, 
    ) { 
        console.log("In the SliderComponent, this.songs", this.songs);  //shows an empty array
    }

在我的 app.module.ts 中，我正在使用 @NgModule 这样

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SliderComponent
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SliderComponent
  ],
  providers: []
})
export class AppModule {}

关于我做错的任何想法？

Answer 1

您应该实现OnInit并使用ngOnInit()方法访问您的数据绑定属性（标题，歌曲等）。根据生命周期，它们在构造函数执行时不会初始化。

Answer 2

您是否在home-page.ts中导入了组件？并包含在@Component下？

通常它就像

#home-page.ts
`import {SliderComponent} from '../../components/slider-component/slider-component';`

@Component({
  templateUrl: 'build/pages/home-page/home-page.html',
  directives: [SliderComponent],
})

Angular 2：调用子组件

2 个答案: