Angular2 передает данные от компонента к корневому компоненту без дочернего компонента

76
9

У меня есть компонент root, который содержит маршруты, связанные с ним компоненты:

роутер:

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 и скрыть один элемент (ngIf="!x") внутри вида RootComponent. Пожалуйста, для подсказок или советов.

Регады Уланд

спросил(а) 2021-01-19T16:07:37+03:00 3 месяца, 2 недели назад
1
Решение
115

Вы можете использовать услугу для передачи данных между компонентами.

Синтаксис службы:

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

Компонент, который отправляет данные:

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

Более подробный учебник здесь

ответил(а) 2021-01-19T16:07:37+03:00 3 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема