在Angular 2中传递非父/子关系组件之间的值 [英] Passing Values Between Non-Parent/Child Relationship Components in Angular 2
问题描述
根据我的理解,在Angular 2中,如果你想在不相关的组件之间传递值(即,不共享路由的组件,因此不共享父子关系),你可以通过共享来实现服务。
From my understanding, in Angular 2, if you want to pass values between unrelated components (i.e., components that don't share a route and thus don't share a parent-child relationship), you do so via a shared service.
这就是我在Angular2应用程序中设置的内容。我正在检查一个url中是否存在一系列字符,如果存在则返回true。
So that's what I've set up in my Angular2 app. I am checking to see if a certain series of characters exist in a url and returning true if it does.
isRoomRoute(routeUrl) {
if ((routeUrl.includes('staff') || routeUrl.includes('contractors'))) {
console.log('This url: ' + routeUrl + ' is a roomRoute');
return true;
} else {
console.log('This url: ' + routeUrl + ' is NOT a room route');
return false;
}
}
在根app.component的构造函数中,我订阅路由事件:
In the constructor of the root app.component, I'm subscribing to routing events:
constructor(private routeService: RouteService,
private router: Router) {
this.router.events.subscribe((route) => {
let routeUrl = route.url;
this.routeService.sendRoute(routeUrl);
this.routeService.isRoomRoute(routeUrl);
});
}
...然后使用提供的网址检查是否有网址包含特定字符串。每次路线改变时都会对此进行评估。
... and then using those provided urls to check whether or not a url contains the specific string. This is evaluated every time the route changes.
所以这一切都按预期工作。
So that's all working as expected.
但是,我在将该检查的结果传递给另一个不相关(非父子)组件时遇到问题。
However, I'm running into a problem in passing the result of that check to a different, non-related (non-parent-child) component.
即使我在app.component和un-related(room.component)组件中使用共享服务(routeService),但是在一个组件中有效在另一个工作。根据我的理解,这里检查的内容的真实性应该足以回复真实的陈述。
Even though I'm using a shared service (routeService) in both the app.component and the un-related (room.component) component, what works in one doesn't work in the other. From my understanding, the "truthiness" of what's being checked here should be enough to return a true statement.
但是在次要的,不相关的组件中,当我调用该函数时出现未定义错误,如下所示:
But in the secondary, unrelated component, I get an "undefined" error when I call the function, like this:
isRoomRoute() {
if (this.routeService.isRoomRoute(this.routeUrl)) {
return true;
}
}
所以这就是我被困住的地方。基本上,关于url是否包含某个字符串的评估已经发生。现在我只需要将该检查的布尔结果传递给辅助的非相关组件。我怎样才能在Angular 2中做到最好?
So this is where I'm stuck. Basically the evaluation as to whether a url contains a certain string has already happened. Now I just need to pass the boolean result of that check to the secondary, non-related component. How can I best do this in Angular 2?
推荐答案
您的理解是正确的,可注射
共享服务是多个不相关组件之间通信的常用方式。
Your understanding is correct, an injectable
shared service is a common way of communication between multiple, unrelated components.
以下是此类用例的演练。
Here is the walk-through of such a use case.
首先,根据您的情况,我们将在 AppComponent
路由器事件>,获取活动路径,并将其传递给 RouteService
,以便服务可以操作它,和/或将其提供给其他组件。
Firstly, suiting your situation, we will listen the Router
events in AppComponent
, obtain the active route, and pass it to RouteService
so the service can manipulate it, and/or serve it to other components.
这就是 AppComponent
的样子:
export class AppComponent {
constructor(private _router: Router,
private _routeService: RouteService) {
this._router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
let url = event.urlAfterRedirects;
this._routeService.onActiveRouteChanged(url);
}
});
}
}
说到服务,这里我们将引入 BehaviorSubject
作为委托,因此使用该服务的组件可以订阅服务数据更改。有关 BehaviorSubject
和其他主题的更多信息,请访问:委托:Angular2中的EventEmitter或Observable
When it comes to the service, here we'll introduce the BehaviorSubject
as a delegate, so the components using the service can subscribe to a service data changes. For more information about BehaviorSubject
and other Subjects, visit: Delegation: EventEmitter or Observable in Angular2
这是我们的共享 RouteService
(组件需要使用服务的单个实例,所以请确保你已经在根级提供了它:
Here is the implementation of our shared RouteService
(components need to use the single instance of the service, so make sure you've provided it at the root level):
@Injectable()
export class RouteService {
isRoomRouteSource: BehaviorSubject<boolean> = new BehaviorSubject(false);
constructor() { }
onActiveRouteChanged(url: string): void {
let isRoomRoute = this._isRoomRoute(url);
this.isRoomRouteSource.next(isRoomRoute);
// do other stuff needed when route changes
}
private _isRoomRoute(url: string): boolean {
return url.includes('staff') || url.includes('contractors');
}
}
使用该服务和订阅的另一个组件的示例到我们的 BehaviorSubject
更改:
The example of another component using the service, and subscribing to our BehaviorSubject
changes:
export class AnotherComponent {
isCurrentRouteRoomRoute: boolean;
constructor(private _routeService: RouteService) {
this._routeService.isRoomRouteSource.subscribe((isRoomRoute: boolean) => {
this.isCurrentRouteRoomRoute = isRoomRoute;
// prints whenever active route changes
console.log('Current route is room route: ', isRoomRoute);
});
}
}
如果订阅 isRoomRouteSource
不需要更改,比如我们只需要存储的最后一个值,然后:
If subscribing to isRoomRouteSource
changes isn't necessary, say we just need the last value stored, then:
export class AnotherComponent {
isCurrentRouteRoomRoute: boolean;
constructor(private _routeService: RouteService) {
this.isCurrentRouteRoomRoute = this._routeService.isRoomRouteSource.getValue(); // returns last value stored
console.log('Current route is room route: ', this.isCurrentRouteRoomRoute);
}
}
希望这有帮助!
这篇关于在Angular 2中传递非父/子关系组件之间的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!