У меня есть относительно простое угловое приложение, использующее службы для передачи значений между моими компонентами. Проблема, с которой я сталкиваюсь, заключается в том, что когда я перехожу к новому маршруту и загружаю компонент, подписываюсь на службу, она всегда возвращает интенсивное значение вместо текущего значения. < /P>
Main App.component имеет компонент для меню, а затем маршрутизатор для загрузки компонентов на основе маршрута, когда пользователь нажимает на элемент меню. У меня есть сервис, который подписан и обновляет текущий выбранный элемент меню в компоненте меню. Другие компоненты подписываются на одну и ту же услугу, чтобы получить текущий пункт меню, но они всегда просто получают начальное значение, а не текущее значение при подписке на Сервис. Подписка в компоненте меню всегда обновлена и получает правильные значения. < /P>
Компонент меню: < /p>
br />
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss'],
providers: [MenuDatabase, NavigationService],
standalone: false
})
export class MenuComponent implements OnInit {
@Input() treeControl = new NestedTreeControl(node => {
return (node.models) ? node.models : node.actions;
});
public activeItem: MenuItem | undefined;
public versionList: Version[] = [];
public menuItemList: MenuItem[] = [];
public currentVersion: string = '';
public isSearching: boolean = false;
public searchForm = new UntypedFormGroup({ search: new UntypedFormControl('') });
hasChild = (_: number, node: MenuItem) =>
(!!node.models && node.models.length > 0) ||
(!!node.actions && node.actions.length > 0);
dataSource = new MatTreeNestedDataSource();
constructor(
public router: Router,
public menuService: MenuService,
private navigationService: NavigationService,
private database: MenuDatabase,
){
navigationService.activeMenuItem$.subscribe(
item => {
this.activeItem = item;
}
)
}
ngOnInit(): void {
}
navigate(menuItem: MenuItem) {
if(menuItem.models)
this.router.navigate([`${this.currentVersion}/module/${menuItem.code}`], { state: { ep: menuItem } });
if(menuItem.actions)
this.router.navigate([`${this.currentVersion}/model/${menuItem.code}`], { state: { ep: menuItem } });
if(!menuItem.actions && !menuItem.models)
this.router.navigate([`${this.currentVersion}/action/${menuItem.code}`], { state: { ep: menuItem } });
this.navigationService.setActiveMenuItem(menuItem)
}< /code>
< /div>
< /div>
< /p>
navigationservice: < /p>
@Injectable({
providedIn: 'root'
})
export class NavigationService {
private defaultItem = {
title: "Home",
code: "home"
}
// Observable string sources
private activeMenuItemSource = new BehaviorSubject(this.defaultItem);
// Observable string streams
activeMenuItem$ = this.activeMenuItemSource.asObservable();
constructor(){
}
// Service message commands
setActiveMenuItem(activeItem: MenuItem) {
console.log("from: " + this.activeMenuItemSource.getValue().title + " | to: " + activeItem.title)
this.activeMenuItemSource.next(activeItem);
}< /code>
< /div>
< /div>
< /p>
console.log в службе Метод setActiveMenuitem () вызывается из компонента меню. < /p>
Компонент, загруженный при навигации ().
@Component({
selector: 'app-action-page',
templateUrl: './action-page.component.html',
styleUrls: ['./action-page.component.scss'],
standalone: false
})
export class ActionPageComponent implements OnInit {
@Input() treeControl = new NestedTreeControl(node => {
return (node.models) ? node.models : node.actions;
});
@Input() menuItem: MenuItem;
constructor(
private activatedRoute: ActivatedRoute,
private actionService: ActionService,
private navigationService: NavigationService
) {
};
ngOnInit(): void {
this.activatedRoute.url.subscribe(seg => {
this.version = seg[0].path || '';
this.level = seg[1].path || '';
this.itemCode = seg[2].path || '';
this.actionService.getAction(this.itemCode)
.subscribe(data => {
this.item = data
})
});
this.navigationService.activeMenuItem$.subscribe(
item => {
console.log(item)
}
)
}< /code>
< /div>
< /div>
< /p>
Журнал консоли в Actionpageponent всегда показывает «дом» (inital value Для наблюдаемого поведения)>
Подробнее здесь: https://stackoverflow.com/questions/793 ... rent-value
Новые подписки всегда возвращают интенсивное значение вместо текущего значения ⇐ Html
Программисты Html
1738041846
Anonymous
У меня есть относительно простое угловое приложение, использующее службы для передачи значений между моими компонентами. Проблема, с которой я сталкиваюсь, заключается в том, что когда я перехожу к новому маршруту и загружаю компонент, подписываюсь на службу, она всегда возвращает интенсивное значение вместо текущего значения. < /P>
Main App.component имеет компонент для меню, а затем маршрутизатор для загрузки компонентов на основе маршрута, когда пользователь нажимает на элемент меню. У меня есть сервис, который подписан и обновляет текущий выбранный элемент меню в компоненте меню. Другие компоненты подписываются на одну и ту же услугу, чтобы получить текущий пункт меню, но они всегда просто получают начальное значение, а не текущее значение при подписке на Сервис. Подписка в компоненте меню всегда обновлена и получает правильные значения. < /P>
Компонент меню: < /p>
br />
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss'],
providers: [MenuDatabase, NavigationService],
standalone: false
})
export class MenuComponent implements OnInit {
@Input() treeControl = new NestedTreeControl(node => {
return (node.models) ? node.models : node.actions;
});
public activeItem: MenuItem | undefined;
public versionList: Version[] = [];
public menuItemList: MenuItem[] = [];
public currentVersion: string = '';
public isSearching: boolean = false;
public searchForm = new UntypedFormGroup({ search: new UntypedFormControl('') });
hasChild = (_: number, node: MenuItem) =>
(!!node.models && node.models.length > 0) ||
(!!node.actions && node.actions.length > 0);
dataSource = new MatTreeNestedDataSource();
constructor(
public router: Router,
public menuService: MenuService,
private navigationService: NavigationService,
private database: MenuDatabase,
){
navigationService.activeMenuItem$.subscribe(
item => {
this.activeItem = item;
}
)
}
ngOnInit(): void {
}
navigate(menuItem: MenuItem) {
if(menuItem.models)
this.router.navigate([`${this.currentVersion}/module/${menuItem.code}`], { state: { ep: menuItem } });
if(menuItem.actions)
this.router.navigate([`${this.currentVersion}/model/${menuItem.code}`], { state: { ep: menuItem } });
if(!menuItem.actions && !menuItem.models)
this.router.navigate([`${this.currentVersion}/action/${menuItem.code}`], { state: { ep: menuItem } });
this.navigationService.setActiveMenuItem(menuItem)
}< /code>
< /div>
< /div>
< /p>
navigationservice: < /p>
@Injectable({
providedIn: 'root'
})
export class NavigationService {
private defaultItem = {
title: "Home",
code: "home"
}
// Observable string sources
private activeMenuItemSource = new BehaviorSubject(this.defaultItem);
// Observable string streams
activeMenuItem$ = this.activeMenuItemSource.asObservable();
constructor(){
}
// Service message commands
setActiveMenuItem(activeItem: MenuItem) {
console.log("from: " + this.activeMenuItemSource.getValue().title + " | to: " + activeItem.title)
this.activeMenuItemSource.next(activeItem);
}< /code>
< /div>
< /div>
< /p>
console.log в службе Метод setActiveMenuitem () вызывается из компонента меню. < /p>
Компонент, загруженный при навигации ().
@Component({
selector: 'app-action-page',
templateUrl: './action-page.component.html',
styleUrls: ['./action-page.component.scss'],
standalone: false
})
export class ActionPageComponent implements OnInit {
@Input() treeControl = new NestedTreeControl(node => {
return (node.models) ? node.models : node.actions;
});
@Input() menuItem: MenuItem;
constructor(
private activatedRoute: ActivatedRoute,
private actionService: ActionService,
private navigationService: NavigationService
) {
};
ngOnInit(): void {
this.activatedRoute.url.subscribe(seg => {
this.version = seg[0].path || '';
this.level = seg[1].path || '';
this.itemCode = seg[2].path || '';
this.actionService.getAction(this.itemCode)
.subscribe(data => {
this.item = data
})
});
this.navigationService.activeMenuItem$.subscribe(
item => {
console.log(item)
}
)
}< /code>
< /div>
< /div>
< /p>
Журнал консоли в Actionpageponent всегда показывает «дом» (inital value Для наблюдаемого поведения)>
Подробнее здесь: [url]https://stackoverflow.com/questions/79392485/new-subscriptions-always-returning-intial-value-instead-of-current-value[/url]
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия