离子原生组件与 Angular 自定义组件

Question

我使用this article创建了角度进度条组件。它工作正常。你能告诉我角度自定义组件和原生ionic component likeion-range有什么区别吗？

自定义角度组件：

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

@Component({
  selector: 'progress-bar',
  templateUrl: 'progress-bar.html'
})
export class ProgressBarComponent {

  @Input('progress') progress;

  constructor() {

  }

}

Answer 1

其实没什么区别。 Ionic 建立在 angular 之上。所有特定的离子组件都是使用角度组件装饰器构建的。 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 {
//..
}

每个 ionic 组件的输入属性使用 Angular 的 @input() 定义，所有输出事件（如 ionChange）使用 Angular 的 EventEmitter 定义。