Utiliser un composant dans plusieurs états avec différentes méthodes de service

Question

Je souhaite créer un composant que je pourrais réutiliser dans différents états, car les fonctions qu'il exécute sont assez similaires. Le problème est qu'il est supposé utiliser différentes méthodes de mon service en fonction de l'état où il est rendu. Étant donné que j'ai ces états:

$stateProvider 
    .state('create', { 
     url: 'create', 
     component: 'myComponent', 
     resolve: { 
      data: function (myService) { 
       return myService.getData(); 
      } 
     } 
    }) 
    .state('edit', { 
     url: 'edit', 
     component: 'myComponent', 
     // another resolve 
    }) 
    // and so on 

Et j'ai un service avec les méthodes suivantes:

class myService { 
    // constructor($http) { this._$http = $http; } 
    create(smth) { 
     return this._$http.post(`${apiUrl}/smth`, smth).then(res => res.data); 
    } 

    edit(smth) { 
     return this._$http 
      .put(`${apiUrl}/smth/${smth.id}`, smth) 
      .then(res => res.data); 
    } 
} 

Et mon composant:

let myComponent = { 
    //bindings: {}, 
    controller: function() {}; 
    template: myTemplate 
} 

Alors que si mon composant est rendu dans create état, il utiliserait create() méthode de myService en conséquence, et le même pour edit et d'autres états que je voudrais avoir. Comment pourrais-je concevoir mon composant pour qu'il fonctionne de cette manière?

Answer 1

Par exemple, vous pouvez passer la liaison dans l'un des cas (comme modifier):

bindings: { isEditState: "<?"} 

Service:

class myService { 
// constructor($http) { this._$http = $http; } 
    makeRequest(smth, method) { 
    return this._$http[method](smth).then(res => res.data); // because they are pretty similar in your example 
    } 
} 

ensuite dans le composant:

makeReuest(smth) { 
    const reqMethod = isEditState ? "put" : "post"; 
    this.myService.makeRequest(smth, method); 
    // ... 
} 

Enfin, dans les itinéraires, vous pouvez passer template au lieu de component:

$stateProvider 
.state('create', { 
    url: 'create', 
    template: '<my-component></my-component>', 
    resolve: { 
     data: function (myService) { 
      return myService.getData(); 
     } 
    } 
}) 
.state('edit', { 
    url: 'edit', 
    template: '<my-component is-edit-state="true"></my-component>', 
    // another resolve 
});