Angular2の2ウェイバインディングで同じ名前のカスタム入力と出力

Question

このコンポーネントの出力値に異なる名前を使用してコンポーネントを修正する方法を知っています。

'角度/コア@' から

インポート{コンポーネント、入力、出力、持つEventEmitter}私は私のコードを共有しましょう。 import {TranslationPipe} from "../pipes/translation.pipe";

@Component({ 
    selector: 'msisdn-confirm', 
    template: ` 
    <div class="msisdn-confirm"> 
    <div> 
     <input type="text" [(ngModel)]="m1"> 
    </div> 
    <div> 
     <input type="text" [(ngModel)]="m2"> 
    </div> 
    <p class="error">{{message}}</p> 
    </div> 
` 
}) 
export class MsisdnConfirm { 
    message:string; 
    @Output('mobile') emitter: EventEmitter<string> = new EventEmitter<string>(); 
    @Input('mobile') set setMobileValue(value) { 
    this.msisdn_confirm = this.msisdn = value; 
    } 

    set m1(value) { 
    this.msisdn = value; 
    if (this.valid()) { 
     console.log('emit' + this.msisdn); 
     this.emitter.emit(this.msisdn); 
    } 
    } 

    set m2(value) { 
    this.msisdn_confirm = value; 
    if (this.valid()) { 
     console.log('emit' + this.msisdn); 
     this.emitter.emit(this.msisdn); 
    } 
    } 

    get m1():string { 
    return this.msisdn; 
    } 
    get m2():string { 
    return this.msisdn_confirm 
    } 

    msisdn: string; 
    msisdn_confirm: string; 

    constructor() { 

    } 

    private valid(): boolean { 
    if (!/06[0-9]{8}/.test(this.msisdn)) { 
     this.message = new TranslationPipe().transform("Het mobiele nummer is incorrect, (bijvoorbeeld: 0612345678)") 
     return false; 
    } else if (this.msisdn != this.msisdn_confirm) { 
     this.message = new TranslationPipe().transform("De mobiele nummers komen niet overeen") 
     return false; 
    } 
    this.message = null; 
    return true; 
    } 
} 

だから、これはそう言って、「有効」オランダの携帯電話番号なので、確認ボックスであることを2つの文字列を検証し、非常に基本的な構成要素です。今私は私が欲しいもの

(mobile)="myParam = $event" 

ような何かを行うことによって、親コンポーネントで私の値を取得することができますが設定するためのこれだけの作品は、このカスタムコンポーネントでサポートされていません

[(mobile)]="myParam" 

ようにそれを使用することです？入力と出力を動作するように、このコンパクトな構文について

Answer 1

はデコレータに文字列パラメータを渡すことにより、特定の命名規則の入力と出力の名前を変更

[(mobile)]="myParam" 

@Output('mobileChange') emitter: EventEmitter<string> = new EventEmitter<string>(); 
    @Input('mobile') set setMobileValue(value) { 
    this.msisdn_confirm = this.msisdn = value; 
    } 

に追従する必要が阻止されます。むしろ

@Output() mobileChange: EventEmitter<string> = new EventEmitter<string>(); 
    @Input() set mobile(value) { 
    this.msisdn_confirm = this.msisdn = value; 
    }