web-dev-qa-db-fra.com

Fonction de passage angulaire2 car l'entrée de composant ne fonctionne pas

J'ai un composant qui prend la fonction en entrée. J'ai passé cette fonction du parent.

Bien que la fonction soit appelée, elle n’est pas en mesure d’accéder aux dépendances de l’instance sur laquelle cette fonction est déclarée.

Voici le composant

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

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

Voici comment le composant est utilisé

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

Lorsque j'exécute cette application, une erreur se produit dans la console en indiquant Cannot read property 'getVal' of undefined.

Voici un plunker pour la question.

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

angularangular2-templateangular2-di
8
Ashok Koyi

Vous devez .bind(this) si vous transmettez des méthodes:

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

ou

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

avec

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

Vous pouvez transmettre une propriété get/set au lieu d’une fonction de la même manière: 

Quelque part à votre avis:

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

Dans votre fichier de composant: 

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

}

plus d'infos @ https://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel

0
Combine