在Angular 6中从一个组件导航到另一个组件时,主题无法正常工作 [英] Subject is not working when route navigating from one component to another component in Angular 6
问题描述
我有组件A,组件B和服务.我在服务中声明了Subject,并在组件B中订阅了Subject.在导航到组件B之前,我正在从组件A向主题发送一些数据.它正在导航到组件B,但是没有触发Subscribe方法./p>
服务:
@Injectable({
providedIn: 'root'
})
export class ServiceTestService {
storage: Recipe;
recipeSelected = new Subject<any>();
constructor() { }
}
组件A 将消息发送到可观察的
@Component({
selector: 'app-recipe-item',
templateUrl: './recipe-item.component.html'
})
export class RecipeItemComponent implements OnInit {
@Input() recipe: Recipe;
constructor(
private recipeService: ServiceTestService,
private rt: Router) { }
ngOnInit() {
}
onRecipeSelected(name: number) {
this.recipeService.recipeSelected.next(this.recipe);
this.rt.navigate(['/recipe', this.ind]);
}
}
组件B:在这里,我订阅了Observable.
@Component({
selector: 'app-recipe-detail',
templateUrl: './recipe-detail.component.html',
styleUrls: ['./recipe-detail.component.css']
})
export class RecipeDetailComponent implements OnInit, OnDestroy {
recipe: Recipe;
constructor(private recipeService: ServiceTestService) { }
ngOnInit() {
this.recipeService.recipeSelected.subscribe(
(res: any) => {
console.log(`Recipe Component ${res}`); }
);
}
}
它正在从组件A导航到组件B,但没有在组件B中触发subscription方法.请提出建议.
感谢Idea @Amit.我使用了ReplaySubject(1)
,它运行良好.
recipeSelected = new ReplaySubject<any>(1);
I have Component A, Component B, and a service. I declared Subject in the service and subscribed the Subject in component B., And I'm sending some data from Component A to the Subject before navigating to component B. It is navigating to component B, but the Subscribe method is not triggering.
Service:
@Injectable({
providedIn: 'root'
})
export class ServiceTestService {
storage: Recipe;
recipeSelected = new Subject<any>();
constructor() { }
}
Component A Sending the message to observable
@Component({
selector: 'app-recipe-item',
templateUrl: './recipe-item.component.html'
})
export class RecipeItemComponent implements OnInit {
@Input() recipe: Recipe;
constructor(
private recipeService: ServiceTestService,
private rt: Router) { }
ngOnInit() {
}
onRecipeSelected(name: number) {
this.recipeService.recipeSelected.next(this.recipe);
this.rt.navigate(['/recipe', this.ind]);
}
}
Component B: Here I subscribed the Observable.
@Component({
selector: 'app-recipe-detail',
templateUrl: './recipe-detail.component.html',
styleUrls: ['./recipe-detail.component.css']
})
export class RecipeDetailComponent implements OnInit, OnDestroy {
recipe: Recipe;
constructor(private recipeService: ServiceTestService) { }
ngOnInit() {
this.recipeService.recipeSelected.subscribe(
(res: any) => {
console.log(`Recipe Component ${res}`); }
);
}
}
It's navigating from Component A to Component B but the subscribe method is not triggering in Component B. Please suggest.
Thanks for the Idea @Amit. I used ReplaySubject(1)
and it is working perfectly.
recipeSelected = new ReplaySubject<any>(1);
这篇关于在Angular 6中从一个组件导航到另一个组件时,主题无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!