2016-06-16 28 views
4

このコンポーネントの出力値に異なる名前を使用してコンポーネントを修正する方法を知っています。Angular2の2ウェイバインディングで同じ名前のカスタム入力と出力

'角度/コア@' から

インポート{コンポーネント、入力、出力、持つ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" 

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

答えて

11

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

[(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; 
    } 
+0

ちょっとおかげで再びギュンターを使用し、これは私がドキュメントはまだこのようなもののために作成する必要があるか、私は間違ってページを見ていたと思います明らかではなかったです。 それは魅力のように機能します。あなたの素早い答えを受け入れることができるまで数分待たなければならない;-) –

+0

これは(http://angular.ioのどこかで)文書化されていると確信しています。既に多くのドキュメントがありますので、探しているものを見つけるのは難しいです;-) –

+1

これらのことをスタックオーバーフローに置くのは良いことですが、とにかくドキュメントの主なソースです。 –

関連する問題