无法在Ionic 3和Angular的@Input（）@Output中使用自定义名称

Question

我认为这个问题在我的示例中很简单，因为当我引用名称时一切正常，但是当我尝试使用自定义短名称时却没有。

当我引用内部字段PercentComplete时，我有一个百分比完整的组件可以移动该栏，但是当我在装饰器中使用自定义名称时，我无法使其正常工作。

我的组件：

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'progress-bar',
    templateUrl: 'progress-bar.html'
})
export class ProgressBarComponent {
    @Input()                        // @Input('Percent') does not work
    PercentComplete: number = 0;

    @Output()
    PercentChange: EventEmitter<number> = new EventEmitter<number>();

    constructor() { }

    Increment() {
        this.PercentComplete ++;
        this.PercentChange.emit(this.PercentComplete);
    }

}

简单的HTML标头

<ion-header>
    <ion-toolbar color="light" mode="md">
        <progress-bar [PercentComplete]="15"></progress-bar>
    </ion-toolbar>
</ion-header>

组件HTML：

<div class="progress-outer">
    <div class="progress-inner"  [style.width]="PercentComplete + '%'">
        {{PercentComplete}}%
    </div>
</div>
<div>
    <button ion-button round (click)="Increment()">
        <ion-icon name="add-circle"> </ion-icon>
    </button>
</div>

如果我将所有HTML引用从PercentComplete更改为Percent，则它将无法正常工作。

Answer 1

输入和输出修饰符仅在您在另一个组件中使用一个组件时才适用。用于它们之间的通信。因此，别名仅在包含进度条的组件中起作用。在进度条本身的HTML内，您应该引用变量名（而不是别名）。

所以这应该工作：

ProgressBarComponent：

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'progress-bar',
    templateUrl: 'progress-bar.html'
})
export class ProgressBarComponent {
    @Input('Percent')
    PercentComplete: number = 0;

    @Output()
    PercentChange: EventEmitter<number> = new EventEmitter<number>();

    constructor() { }

    Increment() {
        this.PercentComplete++;
        this.PercentChange.emit(this.PercentComplete);
    }

}

ProgressBarComponent HTML：

<div class="progress-outer">
    <div class="progress-inner" [style.width]="PercentComplete + '%'">
        {{PercentComplete}}%
    </div>
</div>
<div>
    <button ion-button round (click)="Increment()">
        <ion-icon name="add-circle"> </ion-icon>
    </button>
</div>

包含ProgressBarComponent的组件

<ion-header>
    <ion-toolbar color="light" mode="md">
        <progress-bar [Percent]="15"></progress-bar>
    </ion-toolbar>
</ion-header>

有关组件交互的更多信息，请访问以下页面：Angular Cookbook：组件交互