web-dev-qa-db-ja.com

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

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

コードを共有させてください

import {Component、Input、Output、EventEmitter} from '@ angular/core'; 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"

これは設定に対してのみ機能しますが、これはカスタムコンポーネントではサポートされていませんか？

data-bindingtypescriptangular
17
Mathijs Segers

このコンパクトな構文が機能するには、特定の命名規則に従う必要があります。

[(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;
  }
31
Günter Zöchbauer

上記のGunterのコードのもう1つの例は、次の場合に役立ちます。

export class TaskBook {
  public taskBookID: number;
  public title: String; 
}

内部コンポーネントコード：

   ....
    <input type="text"  pInputText [(ngModel)]="data!.title" (change)="onDataChange()" />
   ....

 @Component({
  selector: 'taskbook_edit',
  templateUrl: './taskbook_edit.component.html' 
})
    export class TaskbookEditComponent { 

      @Input() data: TaskBook;
      @Output() dataChange = new EventEmitter<TaskBook>();

      constructor() { } 

      onDataChange() { 
        this.dataChange.emit(this.data);
      }  
    }

呼び出しコンポーネントの外側：

<taskbook_edit  [(data)]="taskbookObj" ></taskbook_edit>

 public taskbookObj: TaskBook;
6
davaus