使用不同服务方法的多个状态下的一个组件

Question

我想构建一个可以在不同状态下重复使用的组件，因为它执行的功能非常相似。问题是它应该根据呈现的状态使用与我的服务不同的方法。考虑到我有这些状态：

$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

我有一个使用以下方法的服务：

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

我的组件：

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

因此，如果我的组件在 create 状态下呈现，它将相应地使用 myService 中的 create() 方法，对于 edit 和其他状态我也是如此将有。我如何设计我的组件以这种方式工作？

Answer 1

例如，您可以在其中一种情况下传递绑定（如编辑）：

bindings: { isEditState: "<?"}

服务：

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

然后在组件中：

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

最后，在路由中，你可以传递 template 而不是 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
});

使用不同服务方法的多个状态下的一个组件

Use one component in multiple states with different service methods

javascript

web-component

angularjs