Сделать доступной переменную для каждого компонента внутри пользовательского модуля в угловых 4

Question

У меня есть пользовательский модуль в моем проекте angular 5. Название пользовательского модуля: - Ресторан

Этот пользовательский модуль состоит из 5 компонентов. Они. Баннер б. Меню c. Рекомендовать д. Корзина e.Restaurantlayout

В Restaurantlayout есть все эти четыре компонента (Баннер, Меню, Рекомендовать, Корзина), и в маршруте модуля Restaurant я загружаю Restaurantlayout.

До этого момента работал нормально.

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

Как мне этого добиться? Заранее спасибо.

Answer 1

Подход 1:

Передача данных между компонентами

Если вы используете @ Input () , это означает, что вы передаете данные от компонента к другому компоненту. поэтому, чтобы сделать это, вы должны связать входные данные от C1 до C2.

Родительские компоненты:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  outPutData: any;
  constructor() { }

  ngOnInit() {
  }

} 

Родительский компонент parent.html

<app-child [inputData]="outPutData"></app-child>

Вы завершили передачу данных из родительского компонента, теперь самое время перейти к потомству. Для этого найдите пример ниже.

Дочерний компонент:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-child-component',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input("inputData") inputData: any;
  constructor() { }

  ngOnInit() {
    console.log(this.inputData);
  }

}

Подход 2:

Шина данных (общая служба)

Для этого перейдите по этой ссылке