Угловой 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}); } 
  • Динамическое обновление css в Angular 2
  • Как группировать данные в Angular 2?
  • Как передать аргументы url (строку запроса) в HTTP-запрос на Angular?
  • использование внешних JS-библиотек в моем проекте с угловым 2
  • $ применить уже выполненную ошибку
  • Передача параметров сервера asp.net в приложение Angular 2
  • Транспортир Угловой 2 Ошибка: неизвестная ошибка: угловая не определена
  • Перезагрузка текущего состояния - обновление данных
  • Как использовать переменную для определения templateUrl в Angular2
  • Внедрение $ scope в функцию угловой службы ()
  • Угловой 2 - Выполнить код при закрытии windows
  • Interesting Posts

    Двойная загрузка Windows 8 и Windows 7, почему установка Windows 8 не может видеть диски?

    Является gcc 4.8 или более ранней ошибкой регулярных выражений?

    Почему «защищенный» модификатор в Java разрешает доступ к другим classам в одном пакете?

    Является ли запись закрывающих тегов для элементов, которые не являются традиционно пустой плохой практикой?

    Связь между двумя различными процессами в Node.js

    Stealth Ports даже при общении?

    Как передать fragment в виде вариационного ввода?

    Windows 10 – hal.dll / ACPI.sys / ntoskrnl.exe с высоким процессором (включая WPR-файл)

    Проблема с удаленным отображением приложений Java

    Можно ли изменить тип файла сохранения по умолчанию MS Paint в PNG

    Добавление типов в пространство имен std

    Комбинированная область перекрывающихся кругов

    Символ Escape @ в режиме просмотра бритвы

    Windows: перенаправление командной строки в текстовый файл, а также просмотр вывода

    Копирование PNG с прозрачностью из браузера показывает черный фон вместо

    Давайте будем гением компьютера.