Angular 2 выход с выхода маршрутизатора

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

 <router-outlet (navigateTo)="navigateToMessagePart($event)"></router-outlet>

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

Ответ 1

<router-outlet></router-outlet> является просто заполнителем для добавления маршрутизируемых компонентов. Поддержка каких-либо привязок не поддерживается.

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

Подробнее см. https://angular.io/docs/ts/latest/cookbook/component-communication.html

Обновление

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

<router-outlet (activate)="componentAdded($event)" (deactivate)="componentRemoved($event)"></router-outlet>

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

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

Ответ 2

<router-outlet></router-outlet> не может использоваться для извлечения события из дочернего компонента. Один из способов обмена данными между двумя компонентами - использовать общую службу.

Создать службу

разделяемые-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<any>();
    // 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);
        });
      }

}

Надеюсь, что это поможет:)

Ответ 3

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