markmariner
@markmariner

Как изменять данные внутри Angular 1.5 Component через внешний Service?

Я пишу приложение с использованием компонентов Angular 1.5. Данные в компонент передаются извне через параметр resolve, таким образом, я могу отображать данные из разных источников в одном и том же компоненте. Но я не понимаю, как я должен поступить, чтобы изменить эти данные внутри компонента.

Предположим, у меня есть сервис User, который работает с пользователями через API. При загрузке стейта (и, соответственно компонента), я обращаюсь к методу Users.get(), получаю данные пользователей и передаю их внутрь компонента. Для роутинга я использую UI Router. Например:

//...
$stateProvider
      .state('users', {
        url: '/users',
        component: 'formPage',
        resolve: {
          values: function(Users) {
            return Users.get();
          });
//...

// Внутри компонента formPage
//...
component('formPage', {
  bindings: {
    values: '<'
  },
//...


Я получаю эти данные, всё хорошо. Но в шаблоне компонента находится форма, в которой можно изменить данные. При сохранении этих данных я хочу вызвать метод Users.update(), с помощью которого они передадутся на сервер. Но компонент ничего не знает о сервисе Users! И не должен знать, чтобы быть независимым от набора данных.

Каким образом мне указать, что в этом стейте для изменения данных нужно использовать конкретный метод Users.update()? И как мне вызвать этот метод, изменяющий данные, внутри компонента?
  • Вопрос задан
  • 890 просмотров
Решения вопроса 1
markmariner
@markmariner Автор вопроса
На stackoverflow.com мне ответили:

resolve: {
  values: function(Users) {
    return Users.get();
  },
  onUpdate: function(){
    return Users.update.bind(Users);
  }
);

bindings: {
    values: '<',
    onUpdate: '<'
},


И вы можете вызвать функцию так: $ctrl.onUpdate(data).then(...

Это вправду работает, как нужно.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
Немного странно, что компонент не должен знать о сервисе для отправки данных.
Вы можете пихнуть action через биндинги компонента {action: '&'}, если планируется, что эта форма будет использоваться с разными сервисами отправки данных.
Но это конечно очень странно : )
Ответ написан
@lega
Если компонент не завязан ни на какой сервис данных, то коммуникацию можно сделать через проперти из родительского компонента (приложения/контроллера).
Ответ написан
AMar4enko
@AMar4enko
В ангуляре нормально, если компонент знает о сервисе - он же не знает о его конкретной реализации, а получает его через DI. Поэтому tight coupling тут нет, можно тестировать независимо.
Так что не придумывайте себе проблем на ровном месте.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы