3
votes

Comment appeler la méthode de service à partir d'un fichier html.?

Expliquons mon code, j'ai un fichier de composant et un fichier de service

Tout d'abord, à partir du composant, je transmets les valeurs aux méthodes du fichier de service et stocke les valeurs en tant que variable globale dans le fichier de service. p >

Deuxièmement, j'appelle une autre méthode dans le fichier du composant, et j'essaie d'accéder à la variable globale, ce que j'ai stocké plus tôt.

Mon code est ci-dessous

Fichier composant

<button (click)='sMet()'>Enter</button>

Fichier de service

    sMet:any;
    constructor(private ns: NewService,) {
        this.sMet = this.ns.secondMethod;
    }

et le fichier modèle

<button (click)='keycheck()'>Enter</button>

En cliquant sur le bouton, j'obtiens console.log avec les valeurs.

Ma question est maintenant: I J'essaie d'appeler la méthode de service à partir du fichier Html, comme suit

fichier de composant

export class NewService{
    Sobj: any;
    Sobj2: any;
    firstMethod(v1,v2){
        this.Sobj = v1;
        this.Sobj2 = v2;        
    }
    secondMethod(){
        console.log(this.Sobj);
        console.log(this.Sobj2);
    }
}

Et le fichier html est

XXX

mais le code ci-dessus indique que l'objet du service n'est pas défini. Comment l'appeler.?

Démo

angular

2 commentaires

Vous semblez avoir une faute de frappe dans firstMethod (v1, v3) { ne devrait-il pas être v2 ?

Votre démo montre que la première méthode fonctionne. Pourquoi ne l'utilisez-vous pas à la place du second?

4 Réponses :

0
votes

Essayez quelque chose comme ceci:

sMet() {
  this.ns.secondMethod();
}

constructor(private ns: NewService) {}

En gros, au lieu d'assigner la méthode de service, vous l'enveloppez avec une méthode de composant.

5 commentaires

Dans votre question, vous l'assignez ... this.sMet = this.ns.secondMethod; L'appel de la méthode du composant à partir du HTML semble très bien.

Veuillez consulter la première partie de ma question, j'appelle la méthode keycheck à partir de laquelle j'appelle la méthode de service.

D'ACCORD. Il me manque évidemment quelque chose. Si vous faites fonctionner la première partie, pourquoi essayez-vous de le faire différemment sur la deuxième?

J'essaie d'appeler la méthode à partir du fichier HTML, la méthode de fichier du service appelle, mais le problème est attribué à une variable de sObj et sObj1 qui devient indéfinie. Si j'appelle la méthode de fichier du service à partir du composant, elle contient les données.

Je ne comprends toujours pas exactement le problème. Pouvez-vous essayer de créer un exemple reproductible minimal ? Vous pouvez le faire en ligne: stackblitz.com/fork/angular

3
votes

Vous n'avez pas besoin d'utiliser quelque chose comme sMet()

Utilisez directement

   secondMethod = () => {
        console.log(this.Sobj);
        console.log(this.Sobj2);
    }

référez-vous au code à stackblitz

Si vous souhaitez utiliser une variable, utilisez la méthode ci-dessous,

<button (click)='sMet()'>Enter</button>

Et en html,

sMet = () => this.ns.secondMethod();

Si vous voulez utiliser la même manière que celle décrite dans votre démo stackblitz, créez le secondMethod () dans votre testService en tant que fonction de flèche comme ci-dessous.

<button (click)='ns.secondMethod()'>Enter</button>

voici votre code stackblitz

5 commentaires

Veuillez regarder le stackblitz. Il y a des erreurs dans votre code qui peuvent être apparues lorsque vous publiez le code. Je les ai corrigés

Initialisez le service comme ceci ns = new NewService ();

Cela fonctionne. Pouvez-vous expliquer pourquoi cela ne fonctionne pas avec la déclaration de la méthode dans la variable et y accéder.?

J'ai enfin essayé de déclarer la variable dans ngOnInit mais cette fois-là aussi cela ne fonctionne pas.

continuons cette discussion dans le chat .

0
votes

déclarer le service comme public dans le constructeur du composant

<button (click)="ns.secondMethod()">button</button>

alors vous pouvez l'utiliser directement en HTML

constructor(public ns: NewService) { }

0 commentaires

-1
votes

tout d'abord injecter le service dans le constructeur du composant

<button (click)="newService.firstMethod(v1,v2)">

pour accéder à la variable globale

<button (click)="newService.sobj">

pour accéder aux méthodes des services :

constructor(public newService: NewService) { }

Meilleures salutations!

0 commentaires