<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);
});
}
}
Надеюсь, это поможет :)
Можете ли вы подробнее рассказать о том, почему общий сервис является предпочтительным? –
Поскольку нет другого хорошего способа, и разделяемая услуга является предпочтительным способом для общения между компонентами, которые не являются прямым родительским-ребенком в целом. –