通过命令创建一个名为 timeline
的组件:
ionic g component timeline
创建完成后目录如下:
├── components
│ └── timeline
│ │ └── timeline.html
│ │ └── timeline.scss
│ │ └── timeline.ts
└── components.module.ts
下面是详细代码
// timeline.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'timeline',
templateUrl: 'timeline.html'
})
export class TimelineComponent {
@Input('endIcon') endIcon = "ionic";
constructor() {}
}
@Component({
selector: 'timeline-item',
template: '<ng-content></ng-content>'
})
export class TimelineItemComponent {
constructor() {}
}
@Component({
selector: 'timeline-time',
template: '<span>{{time.subtitle}}</span><span>{{time.title}}</span>'
})
export class TimelineTimeComponent {
@Input('time') time = {};
constructor() {}
}
// component.module.ts
import { IonicModule } from 'ionic-angular';
import { NgModule } from '@angular/core';
import { TimelineComponent, TimelineItemComponent, TimelineTimeComponent } from './timeline/timeline';
@NgModule({
declarations: [TimelineComponent, TimelineItemComponent, TimelineTimeComponent],
imports: [IonicModule],
exports: [TimelineComponent, TimelineItemComponent, TimelineTimeComponent]
})
export class ComponentsModule {}
问题的关键 是当使用命令创建组件时自动生成的代码里缺少
import { IonicModule } from 'ionic-angular';
...
imports: [IonicModule],
加上即可。