web-dev-qa-db-ja.com

コンポーネント入力としてAngular2を渡す関数が機能しない

関数を入力として受け取るコンポーネントがあります。この関数を親から渡しました。

関数が呼び出されても、関数は、この関数が宣言されているインスタンスの依存関係にアクセスできません。

これがコンポーネントです

@Component({
  selector: 'custom-element',
  template: `
    {{val}}
  `
})
export class CustomElement {
  @Input() valFn: () => string;

  get val(): string {
    return this.valFn();
  }
}

コンポーネントの使用方法は次のとおりです

@Injectable()
export class CustomService {
  getVal(): string {
    return 'Hello world';
  }
}

@Component({
  selector: 'my-app',
  template: `
   <custom-element [valFn]="customVal"></custom-element>
  `,
})
export class App {
  constructor(private service: CustomService) {
  }
  customVal(): string {
    return this.service.getVal();
  }
}

このアプリを実行すると、コンソールにCannot read property 'getVal' of undefined

これが問題のプランカーです。

https://plnkr.co/edit/oQ229rXqOU9Zu1wQx18b?p=preview

angularangular2-templateangular2-di
10
Ashok Koyi

メソッドを渡す場合は、.bind(this)が必要です。

<custom-element [valFn]="customVal.bind(this)"></custom-element>

または

export class App {
  constructor(private service: CustomService) {
  }
  customVal(): string {
    return this.service.getVal();
  }
  customValFn = this.customVal.bind(this);
}

と

<custom-element [valFn]="customValFn"></custom-element>
23
Günter Zöchbauer

同様の方法で、関数の代わりにget/setプロパティを渡すことができます。

あなたの見解のどこかに：

<input type="text" [(ngModel)]="yourprop">

コンポーネントファイルで：

@Component({
  selector: 'myapp',
  templateUrl: './myapp.component.html',
  styleUrls: ['./myapp.component.scss']
})
export class App {
  constructor() { }

  yourprop: any;

  get yourprop(): any {
    return this.scheduleEndDate;
  };

  //set accessor including call the onchange callback
  set yourprop(v: any) {
    // TODO do something else
    // You can do whatever you want just like you have passed a function

    if (v !== this.scheduleEndDate) {
      this.scheduleEndDate = v;
    }
  }

}

詳細情報@ https://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

1
Combine