Angular2 하위 구성 요소없이, 루트 구성 요소에 대한 구성 요소에서 데이터를 전달

Question

나는 그것에 루트, 마녀 부착 된 구성 요소를 보유하고 루트 구성 요소를 가지고 :

라우터 :

const appRoutes: Routes = [ 
    { 
     path: 'welcome', 
     component: BaseComponent 
    }, 
    { 
     path: '', 
     redirectTo: '/welcome', 
     pathMatch: 'full' 
    }, 
    { 
     path: 'story/:id', 
     component: DetailComponent 
    }, 
    { 
     path: 'about-me', 
     component: AboutComponent 
    }, 
    { 
     path: ':url/:id', 
     component: CategoryComponent 
    }, 
    { 
     path: 'authentication', 
     component: DashboardComponent 
    } 
] 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

ROOT의 HTML :

<header *ngIf="!x"> 
    <h1><a routerLink="/">{{title}}</a></h1> 
    <nav> 
     <a *ngFor="let nav of navigation" routerLink="{{ nav.url }}/{{ nav.category }}">{{ nav.title }}</a> 
     <a routerLink="/about-me">about-me</a> 
     <a *ngIf="logged" routerLink="/authentication">dashboard</a> 
    </nav> 
</header> 


<router-outlet></router-outlet> 
<social></social> 

DashboardComponent에 입력하면 일부 변수 나 이벤트가 RootComponent에 보내지고 하나의 요소가 RootComponent의 내부에 표시됩니다. (ngIf="!x") 힌트 나 조언을 구하십시오.

Regads Uland는

Answer 1

당신은 구성 요소간에 데이터를 전달하는 서비스를 사용할 수 있습니다.

서비스 구문 :

export class ProductManagerComponent { 
    constructor(private pagerService: PagerService){} 

    pageChanged(pagenum) 
    { 
     this.productSearchService.changePage(pageNum) 
    } 
} 

수신기 성분 :

export class ProductSearchComponent { 
    constructor(private productSearchService: ProductSearchService) { 
     this.productSearchService.pageNumberChanged$.subscribe(param => { 
      this.getPageFromSearchResult(param); 
     }) 
    } 
} 

보다 상세한 가이드 here

데이터를 전송

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 

    @Injectable() 
    export class ProductSearchService{ 

    private pageNumberChangedSource = new Subject<any>(); 
     pageNumberChanged$ = this.pageNumberChangedSource.asObservable(); 

    changePage(param: any){ 
      this.pageNumberChangedSource.next(param); 
     } 
    } 

부품