在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屋！