Угловой 2 выход с выхода маршрутизатора

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

 

Как я могу это сделать правильно? Может быть, переместите его от ребенка? Но как я могу получить родительские методы от ребенка. Большое спасибо за любую помощь!

является просто заполнителем для добавления маршрутизируемых компонентов. Нет никакой поддержки для каких-либо привязок.

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

Для получения дополнительной информации см. https://angular.io/docs/ts/latest/cookbook/component-communication.html

Обновить

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

  

который позволяет связываться (вызывать геттеры, сеттеры и методы) с компонентом в componentAdded()

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

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

Создание сервиса

разделяемые-service.ts

 import { Observable } from 'rxjs/Observable'; import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injectable() export class SharedService { // Observable string sources private emitChangeSource = new Subject(); // Observable string streams changeEmitted$ = this.emitChangeSource.asObservable(); // Service message commands emitChange(change: any) { this.emitChangeSource.next(change); } } 

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

Детский компонент будет испускать изменения каждый раз, когда вызывается метод onClick ()

child.component.ts

 import { Component} from '@angular/core'; @Component({ templateUrl: 'child.html', styleUrls: ['child.scss'] }) export class ChildComponent { constructor( private _sharedService: SharedService ) { } onClick(){ this._sharedService.emitChange('Data from child'); } } 

Материнский компонент получит это изменение. Для этого запишите подписку внутри конструктора родителя.

parent.component.ts

 import { Component} from '@angular/core'; @Component({ templateUrl: 'parent.html', styleUrls: ['parent.scss'] }) export class ParentComponent { constructor( private _sharedService: SharedService ) { _sharedService.changeEmitted$.subscribe( text => { console.log(text); }); } } 

Надеюсь это поможет 🙂

Ответ, приведенный выше, является правильным и полным. Я просто хочу добавить для тех, у кого решение не сработало для них, чтобы они добавляли эту услугу поставщикам только в родительский компонент, а не в дочерний элемент, чтобы убедиться, что вы получаете одноэлемент службы, иначе два экземпляра службы будут создано. Этот ответ вдохновлен комментарием @HeisenBerg в предыдущем ответе.

Я немного изменился от ответа Антара Датты. Я создал услугу подписчика

 import {Injectable} from '@angular/core'; import {Subject} from 'rxjs'; @Injectable({ providedIn: 'root' }) export class Subscriber { protected observable = new Subject(); public next(item: T) { this.observable.next(item); } public subscribe(callback: (item:T)=>void) { this.observable.subscribe(callback); } } 

Всякий раз, когда мне нужно два компонента для обмена некоторой информацией, я вставляю эту службу в конструктор, который подписывается на него:

  constructor(protected layoutOptions: Subscriber>) { layoutOptions.subscribe(options => this.options = Object.assign({}, this.options, options)); } 

и тот, который его обновляет

 constructor(protected router: Router, protected apiService: ApiService, protected layoutOptions: Subscriber>) { this.layoutOptions.next({showNavBar: false}); } 
  • В Angular, как вы определяете активный маршрут?
  • Динамическое обновление css в Angular 2
  • Как использовать плагин jQuery с угловым 4?
  • Angular 4.3.3 HttpClient: как получить значение из заголовка ответа?
  • Angular2 SEO - Как сделать угловое приложение с возможностью сканирования 2
  • rxjs / Subject.d.ts error: Class 'Subject ' неправильно расширяет базовый class 'Observable '
  • App.settings - Угловой способ?
  • использование внешних JS-библиотек в моем проекте с угловым 2
  • Свойство 'map' не существует в типе 'Observable '
  • Как правильно обновить угловую 2 (npm) до последней версии?
  • Angular2 - динамически загружать компонент из модуля
  • Давайте будем гением компьютера.