Как передать значение из одноуровневого компонента в розетку маршрутизатора в angular 6? - PullRequest
Новая
       6

Как передать значение из одноуровневого компонента в розетку маршрутизатора в angular 6?

0 голосов
/ 24 сентября 2018

app.component.html: 

<app-navbar>...router links here</app-navbar>
<app-controller>...contains multiple inputs</app-controller>
<router-outlet>... renders n pages </router-outlet>

Как использовать динамические данные в компоненте <controller> (который может изменить пользователь) на <router-outlet> дочерних страницах?controller component создает данные, которые должны быть доступны всем страницам.Каждая страница отображает различные формы таблиц на основе данных компонентов контроллера.

Я пробовал eventEmitter и @input @outputs, но работал на родителей и ребенка, а не на эту иерархию.использование сервиса также не работает для динамических данных.Я не уверен, что является эталоном для такого рода требований.

чтобы добиться этого в angular.js, я бы включил компонент контроллера в каждый компонент страницы и передавал его данные через $rootScope и добавлял $rootScope.$watch, если хотел видеть, что они изменились.

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

Воспользуйтесь услугой для этого.Используйте его на всех страницах, для которых требуются общие данные, и предоставьте их в app.component, поэтому контроллер и render-outlet будут использовать один и тот же экземпляр службы.

В компоненте приложения: 

@Component({
  ...,
  provide: [SharedDataService],
})
export class AppComponent {
}

и у детей: 

constructor(
  sharedDataService : SharedDataService,
) { }

Именно так Angular рекомендует управлять связью между компонентами.

0 голосов
/ 24 сентября 2018

Вы можете начать использовать тему или Поведение Тема из RX js, где вы можете обновить данные для нескольких компонентов за один снимок, пожалуйста, найдите несколько примеров 

// Behavior Subject

// a is a initial value. if there is a subscription 
// after this, it would get "a" value immediately
let bSubject = new BehaviorSubject("a"); 

bSubject.next("b");

bSubject.subscribe((value) => {
  console.log("Subscription got", value); // Subscription got b, 
                                          // ^ This would not happen 
                                          // for a generic observable 
                                          // or generic subject by default
});

bSubject.next("c"); // Subscription got c
bSubject.next("d"); // Subscription got d

// Regular Subject

let subject = new Subject(); 

subject.next("b");

subject.subscribe((value) => {
  console.log("Subscription got", value); // Subscription wont get 
                                          // anything at this point
});

subject.next("c"); // Subscription got c
subject.next("d"); // Subscription got d
...