Question

在angular8中，我生成了一个服务，该服务使用Router来订阅路由器更改，并获取组件实例，因此我使用该组件调用该函数。但是功能中的this不是组件。在服务中调用函数时如何绑定组件？

服务

this.router.events
      .pipe(
        filter((event) => event instanceof NavigationEnd),
        map(() => this.activatedRoute),
        map((route) => {
          while (route.firstChild) {
            route = route.firstChild;
          }
          return route;
        }),
        filter((route) => route.outlet === 'primary')
      )
      .subscribe((event: any) => {
        event.component.prototype.test && event.component.prototype.test();
     });
 }

组件

import { Component} from '@angular/core';
@Component({
  selector: 'xx',
})
export class TestComponent{
  title = "test string";

  test(){
   console.log(this.title); // the result is undefined
  }
}

我尝试了event.component.prototype.test().bind(event.component)，但是没有用，有人可以帮我吗？谢谢。

Answer 1

如评论中所述，在服务内部使用组件方法不是一个好习惯。相反，您可以根据服务类的更改通知组件。

假设我们的服务名称为TestService，只需声明一个Subject即可用于通信。只需调用next的{{1}}方法即可将信息传播到组件。

Subject

在从服务中收到特定通知时，将服务注入组件并执行方法。

export class TestService {
  readonly inform$ = this.router.events.pipe(
    filter((event) => event instanceof NavigationEnd),
    map(() => this.activatedRoute),
    map((route) => {
      while (route.firstChild) {
        route = route.firstChild;
      }
      return route;
    }),
    filter((route) => route.outlet === 'primary')
  );

  constructor(private router: Router, private route: ActivatedRoute) {}
}

如何在angular8路由器事件中将功能与组件绑定？

1 个答案: