Связь/обмен данными компонентов angular 1.5 между контроллерами

Я очень новичок в концепции Angular-Typescript.

Настроено Typescript, компоненты Angular 1.5, по возможности не использовать $scope

Один компонент имеет поля ввода поиска. Другой компонент должен получить возвращаемое значение от службы и отобразить его.

Поскольку многие статьи в Интернете предлагают использовать сервис для обмена данными между контроллерами (компонентами). Но эти решения не совсем соответствуют моему случаю. Либо чистый угловой, либо $scope, либо без машинописного текста.

Мои результаты на данный момент: Если попытаться передать переменную через службу, она появится под контроллером первого компонента. Контроллер второго компонента не попадает, ни передаваемая переменная/параметр (через конструктор) не имеет никакого значения.

см. комментарии ниже для примера кода


typescript angularjs angular-components angular-controller
person Community    schedule 20.09.2016    source источник
comment
если бы вы могли создать сценарий в plunker, это было бы очень полезно... ничего не могу понять без примера кода   -  person harishr    schedule 20.09.2016
comment
пример кода/сценарий (хотя машинописный текст, похоже, не работает в плункере) yxf8wffJLx67tu83q0K9?p=превью   -  person    schedule 20.09.2016

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете привязать переменную из вашего контроллера к компонентам.

Например: определите для каждого компонента привязку с именем searchModel, которая является двусторонней привязкой, поэтому с учетом <comp-a> и <comp-b> в качестве компонентов и контроллера $ctrl в качестве контроллера представления, в котором используются компоненты, вы можете сделать это:

<div>
    <!-- $ctrl is the controller of the view -->
    <comp-a search-model="$ctrl.search"></comp-a>
    <comp-b search-model="$ctrl.search"></comp-b>
</div>

Поскольку 2 компонента связаны с одной и той же моделью на контроллере представления, если один из них изменит его (например, comp-a, который является компонентом «поиск»), другой компонент также получит изменение.

Это полезно, если вы можете использовать несколько экземпляров компонентов, поэтому вы можете соединить каждый набор из 2 компонентов, используя другую переменную модели на контроллере представления.

<div>
    <!-- $ctrl is the controller of the view -->
    <comp-a search-model="$ctrl.search"></comp-a>
    <comp-b search-model="$ctrl.search"></comp-b>

    <!-- changes in $ctrl.search2 will not reflect to comp-b above, only the one below -->
    <comp-a search-model="$ctrl.search2"></comp-a>
    <comp-b search-model="$ctrl.search2"></comp-b>
</div>
person Ron Dadon    schedule 20.09.2016

arrow_upward
0
arrow_downward

Вы можете использовать angular события для асинхронной связи между контроллерами. Подпишите свой контроллер слушателя с помощью $scope.$on('inputChanges'), и когда ввод изменится (вам нужно будет использовать директиву $watch или ng-change для обнаружения изменения), отправьте событие с помощью < strong>$rootScope.$broadcast или $scope.$emit (что вам следует использовать, зависит от структуры родительского/дочернего контроллера, см. разницу в документации angular https://docs.angularjs.org/api/ng/type/$rootScope.Scope).

Что касается $scope и его неиспользования, Angular теперь рекомендует использовать синтаксис ControllerAs, но проблем с использованием $scope вообще нет. Просто будьте осторожны с тем, как использовать одноразовую привязку, чтобы избежать ненужных наблюдателей, и не забудьте внедрить его в свой контроллер и конструктор с помощью $inject.

person J Carv    schedule 20.09.2016