Nicht in der Lage, benutzerdefinierte Namen in @Input() @Output mit Ionic 3 und Angular

Question

Ich denke, das Problem ist etwas einfaches in meinem Beispiel, wie alles funktioniert, wenn ich die Namen referenzieren, aber nicht, wenn ich versuche, die benutzerdefinierte kurze verwenden Namen.

Ich habe eine Prozent Complete Komponente bewegen die Leiste entlang, die funktioniert, wenn ich das interne Feld PercentComplete referenzieren, aber ich kann es nicht funktionieren, wenn ich einen benutzerdefinierten Namen im Dekorateur verwenden.

Meine Komponente:

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

} 

Einfache HTML-Header

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

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

Wenn ich alle HTML-Referenzen aus PercentComplete ändern Sie einfach Prozent, dann funktioniert nicht.

Answer 1

Eingangs- und Ausgangsdekoratoren sind nur anwendbar, wenn Sie eine Komponente in einer anderen Komponente verwenden. Es soll für die Kommunikation zwischen ihnen verwendet werden. Der Alias ​​würde also nur in der Komponente funktionieren, die den Fortschrittsbalken enthält. Im HTML-Code des Fortschrittsbalkens sollten Sie auf den Variablennamen (und nicht auf den Alias) verweisen.

dies sollte also funktionieren:

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

Komponente der ProgressBarComponent enthält

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

Weitere Informationen zur Interaktion mit Komponenten finden Sie auf dieser Seite: