Question

I have root component, which holds routes, witch attached components to it:

ROUTER:

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>

When I enter into DashboardComponent I wannt to send some variable or event to RootComponent and hide one element (ngIf="!x") inside view of RootComponent. Please for hints, or advice.

Regads Uland

Answer 1

You can use a service to pass data between components.

Service syntax:

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);
        }
    }

Component that send data:

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

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

Receiver component:

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

Angular2 pass data from component to root component, without child component

1 个答案: