無法在@Input（）@Output中使用自定義名稱與Ionic 3和Angular

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> 

如果我改變從PERCENTCOMPLETE所有HTML引用僅僅是百分比，那麼它不起作用。

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：包含ProgressBarComponent

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

<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> 

組件有關組件交互的更多信息，請參閱此頁：Angular Cookbook: Component Interaction