Как передать данные между компонентами в угловых

Question

<div class="container-fluid fill">
<app-navbar></app-navbar>
<div class="container fill">
  <div class="row padding">
    <div class="col-md-3 ">
      <app-sidebar></app-sidebar>
    </div>
    <div class="col-md-6 text-center">
     <app-menu-section></app-menu-section>
    </div>
    <div class="col-md-3 ">
     <app-cart></app-cart>
    </div>
  </div>
</div>
</div>

app-sidebar отображает меню категорий, и когда категория выбрана, я хочу передать значение компоненту раздела меню, чтобы отобразить соответствующую категорию

Итак, как передать значение между двумя компонентами, которые являютсяне родительский ребенок

Answer 1

Вы можете сделать это, передавая данные вверх и вниз по цепочке компонентов, как описано Anuradha Gunasekara, если вы помните, что ваше приложение может стать громоздким и чрезмерно сложным.Конечно, все зависит от контекста и того, что вы хотите создать.Я сделал эту ошибку как новичок в Angular в прошлом и обнаружил, что запутался в беспорядке, чтобы проследить, как только ситуация вырастет.

Answer 2

Есть много способов сделать это.Я предлагаю вам определить функцию get внутри контроллера вашего компонента боковой панели приложения, например 'getSelectedItem', который возвращает значение выбранного элемента.Так что теперь вы можете восстановить выбранное значение в любое время благодаря привязке и передать значение другому компоненту.

Следовательно, в вашем компоненте боковой панели приложения вы можете определить привязку

binding: {
   getSelectedValue: '='
}

В контроллере теперь вы можете определить функцию get

thsi.getSelectedValue = {
   // do your stuff here
   return selectedValue
}

Теперь важный отрывок: в главном контроллере (я имею в виду контроллер HTML-страницы, в которой вы используете оба компонента)Вы должны объявить функцию, просто чтобы сообщить angular, что эта функция существует, но она здесь не определена (на самом деле мы хотим вызвать функцию, объявленную в компоненте, чтобы восстановить выбранное значение).Так что в вашем контроллере вам нужно просто написать

this.getValue;

Теперь на html-странице вы можете использовать ваш измененный компонент следующим образом:

<app-sidebar get-selected-value='mainController.getValue'></app-sidebar>

(Запомните нотацию kebab: getSelectedItem toget-selectd-item)

Это своего рода переплет реверса.Фактически вы обычно определяете функцию в своем главном контроллере, а затем передаете ее своему компоненту.В этом случае функция определена в вашем компоненте, но благодаря привязке теперь вы можете вызывать функцию getSelectedItem в вашем главном контроллере, вызывая this.getValue ();На самом деле функция this.getValue () не определена в контроллере, она просто объявлена, но она связана с функцией getSelectedValue.

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

Возможно, этот метод немного длиннее, чем другой, но я предлагаю использовать его, потому что во многих случаях очень полезно использовать эту «обратную» привязку.

Answer 3

Atlernative вы можете поделиться параметром как наблюдаемым в вашем сервисе.Просто добавьте сервис в ваши компоненты и подпишитесь.По категории выберите обновление, наблюдаемое и все подписчики будут проинформированы.

export class CategoryService {
  emitter: EventEmitter;
  category$: Observable<Category>;

  constructor() { 
    this.$category = Observable.create(e => this.emitter = e);
  }

  getCategory$(): Observalbe<Category> {
    return this.$category;
  }

  selectCategory(category: Category): void {
    this.emitter.next(category)
  }   
}

Answer 4

Используйте @ Output Emitter событий, чтобы испускать выбранную категорию из компонента боковой панели приложения.

Затем вы можете написать обработчик событий для этого компонента хоста.

В app-sidebar component.ts

@Output() categorySelect = new EventEmitter<any>(); //put the data type of category here.

//use this method to set the selected category
    public onSelectionChange(data): void {
       this.categorySelect.emit(data);
    }

---

В файле host.component.html.

<div class="col-md-3 ">
  <app-sidebar (categorySelect)="onCategorySelect($event)"></app-sidebar>
  <app-menu-section [selectedCategory]="selectedCategory"></app-menu-section>
</div>

в файле host-component.ts

public onCategorySelect(data): void {
 this.selectedCategory = data;
}

---

В файле app-menu-section.ts

@Input()  selectedCategory: any;

Надеюсь, это поможет.Для получения дополнительной информации прочитайте это ;