Angular 9 - 订阅的服务和 ActivationEnd 路由器事件

Question

我在 ActivationEnd 路由器服务中访问服务数据时遇到困难。

我的学生：

export class ListConditionsComponent implements OnInit {
  conditions: Condition[];
  fCon: string[];

  constructor(private _service: ConditionService,
    private _router: Router,
    private _route: ActivatedRoute) { }

  ngOnInit():void {
    this._service.getConditions()
      .subscribe(data => this.conditions = data);

    this._router.events.subscribe(event => {
      if(event instanceof NavigationStart) {  
      }

      if(event instanceof ActivationEnd) {
        this.fCon = event.snapshot.queryParams["fCon"];        
        console.log("actiend fCon:" + this.fCon);
        console.log("actiend conditions:" + this.conditions);
      }
    });
  }
 }

模板：

<ul>
    <li *ngFor="let condition of conditions; let i = index">
        <label>
            <input type="checkbox" value="{{ condition.Id }}" *ngIf="fCon == condition.Id" checked />
            <input type="checkbox" value="{{ condition.Id }}" *ngIf="fCon != condition.Id" />
            <span>{{ condition.Name }}</span>
        </label>
    </li>
</ul>

我的模板正在填充，没有任何问题。
但是在 TS 中 console.log 表示 "actiend conditions:undefined".
我可以毫无问题地读取 fCon 变量，但只有条件变量显示为未定义。我不知道为什么我无法在 ActivationEnd 事件中访问 "conditions"。

有人知道为什么吗？谢谢。

注：
如果您想知道，为什么我要像这样访问查询参数，这是在未加载到 [router-outlet] 的组件中完成的，因此我无法访问访问查询参数的传统方式。

在头痛了几个小时后，我发现这对我有效

ngOnInit(): void {
  this._router.events.subscribe(event => {
    if (event instanceof ActivationEnd) {
      this.getAllConditions();
    }
  });
}

async getAllConditions() {
  this.conditions = await this._service.getConditions().toPromise();
  //from here I can continue as the data will be loaded from hereon
  console.log(this.conditions.length); //prints fine the length as the data is loaded
}

再次感谢@Kurt Hamiton 指出异步加载，我确信你的代码对其他人也有用，这就是为什么我将你的代码标记为答案

Answer 1

每个请求都是异步的，因此您需要通过链接可观察对象来同步调用。如果您的服务呼叫取决于您的路由，您可以将服务呼叫附加到路由呼叫。在你的情况下，服务调用不依赖于路线，所以应该先来。

export class ListConditionsComponent implements OnInit {
  conditions: Condition[];
  fCon: string[];

  constructor(private _service: ConditionService,
    private _router: Router,
    private _route: ActivatedRoute) { }

  ngOnInit():void {
    // first, get the conditions from the service... 
    this._service.getConditions().pipe(
      // now save them to the "conditions" property
      tap(data => this.conditions = data),
      // now switch to a different observable
      concatMap(() => this._router.events)
    ).subscribe(events => {
      // subscribe will receive whatever the last observable in the chain is emitting
      if(event instanceof NavigationStart) {  
      }

      if(event instanceof ActivationEnd) {
        this.fCon = event.snapshot.queryParams["fCon"];        
        console.log("actiend fCon:" + this.fCon);
        console.log("actiend conditions:" + this.conditions);
      }
    });
  }
}

Observables 链接在一起，并在管道中处理。在您的情况下，您希望从服务中获取数据，将其存储在组件中，然后接收所有路由器事件。

Angular 9 - 订阅的服务和 ActivationEnd 路由器事件

Angular 9 - subscribed service and ActivationEnd router events

angular

angular-router

angular9