无法在带有 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);
    }

}

简单HTMLheader

<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 更改为仅百分比，则它不起作用。

Answer 1

输入和输出装饰器仅适用于在另一个组件中使用一个组件的情况。它是用于它们之间的通信的。所以别名只能在包含进度条的组件中使用。在进度条本身的 HTML 中，您应该引用变量名称（而不是别名）。

所以这应该有效：

ProgressBar组件：

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);
    }

}

进度条组件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: Component Interaction

无法在带有 Ionic 3 和 Angular 的 @Input() @Output 中使用自定义名称

Not able to use custom names in @Input() @Output with Ionic 3 and Angular

ionic3

angular