离子原生组件与角度自定义组件

Question

我用这篇文章创建了角度进度条组件。它工作正常。你能告诉我角度定制组件和天然离子组件(如ion-range(有什么区别吗？

自定义角度组件：

import { Component, Input } from '@angular/core';
@Component({
  selector: 'progress-bar',
  templateUrl: 'progress-bar.html'
})
export class ProgressBarComponent {
  @Input('progress') progress;
  constructor() {
  }
}

Answer 1

区别真的没什么。离子建立在棱角分明之上。所有特定的离子成分都是使用角度组分装饰器构建的。像ion-range这样的组件实际上是ionic-angular模块中的 Angular 组件。

如果您检查链接的来源，它显示为：

@Component({
  selector: 'ion-range',
  template: '<!-- custom html here -->'
  providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: Range, multi: true } ],
  encapsulation: ViewEncapsulation.None,
})
export class Range extends BaseInput<any> implements AfterContentInit, ControlValueAccessor, OnDestroy {
//..
}

每个离子组分的输入属性都是使用 Angular 的@input()定义的，所有输出事件(如ionChange(都是使用 Angular 的EventEmitter定义的