递归可观察调用中的Angular 4加载树结构

2 回答

• 0

  暂且不说“为什么？”因为我对递归的可观察结构感兴趣...你不能通过嵌套订阅的observable递归 . 您需要使用更高阶的可观察量，而您根本不应该订阅 . 关键是调用者需要订阅，否则它永远不会工作 .

  loadNavigation(): Observable<Menu[]> {
      if (this.navigationLoaded) {
        return Observable.of(this.navigationTree);
      } else {
        let navigationTree = new Array();
        return this.loadNavigationByUrl('public', this.navigationTree)
                   .do(data => {
                     // console.log(data);
                     if (data) {
  
                       this.navigationTree = data;
                       console.log('navigation loaded');
                       this.navigationLoaded = true;
                     }
                    }); // could subscribe here instead if you really want.
      }
  }
  
  loadNavigationByUrl(url: string, navArray: Menu[]): Observable<Menu[]> {
  
    console.log(`Loading ${url}/index.json`);
  
    return this.http.get<Menu[]>(`${url}/index.json`, { responseType: 'json' })
      .catch((err) => this.handleError(err))
      .switchMap(data => {
        if (!data) 
          return Observable.of(null);
  
        let children$ = [];
        data.forEach((item: Menu, index: number, array: Menu[]) => {
          // add to navigationTree
          navArray.push(item);
  
          if (item.loadChildrenFromUrl) { // FYI empty string is "false" in JS
            item.children = new Array();
            children$.push(this.loadNavigationByUrl(`${url}/${item.loadChildrenFromUrl}`, item.children));
          }
        });
        return (children$.length) ? Observable.forkJoin(children$) : Observable.of([]);
      });
  }
  

  回复于 2024-04-29T18:24:23+08:00
• 2

  我现在明白了为什么@ bryan60开始回答......

  暂且不说“为什么？” . . .

  Observables递归非常复杂 . 我对可观察的东西如此固定，以至于我错过了一个非常好的Typescript特征 . . . async/await

  代码不是那么优雅，但更容易阅读 . 以防有人像我一样愚蠢 .

  loadNavigation(): Promise<boolean>  {
  
      if (this.navigationLoaded) {
  
        return new Promise<boolean>(resolve => {
            resolve(true);
        });
  
      } else {
  
        const navigationTreeCache = new Array();
  
        return new Promise<boolean>(resolve => {
          this.loadNavigationPromise('public', navigationTreeCache).then((value: boolean) => {
            this.navigationTree = navigationTreeCache;
            this.navigationLoaded = true;
            console.log('navigation loaded');
            resolve(true);
          });
        });
  
      }
    }
  
    async loadNavigationPromise(url: string, navArray: Menu[]): Promise<boolean> {
  
      console.log(`Loading ${url}/index.json`);
  
      try {
  
        // debug wait a second on each function call
        // await new Promise<number>(resolve => { setTimeout(() => { resolve(); }, 1000); });
  
        const data = await this.http.get<Menu[]>(`${url}/index.json`, { responseType: 'json' }).first().toPromise();
  
        if (data) {
          for (let i = 0; i < data.length ; i++) {
            const item = data[i];
            navArray.push(item);
  
            if (item.loadChildrenFromUrl) {
              item.children = new Array();
              const loadSucessfully = await this.loadNavigationPromise(`${url}/${item.loadChildrenFromUrl}`, item.children);
              if (!loadSucessfully) {
                return false;
              }
            }
          }
        } else {
          console.error(`got no data from url ${url}`);
        }
  
        return true;
  
      } catch (error) {
          console.error(error);
          return false;
      }
    }
  

  回复于 2024-04-29T18:24:23+08:00