Question

我有一个菜单服务，它使用菜单类来保存菜单结构。菜单类使用menuItem类。

服务执行一些http请求来获取数据。从此数据菜单中创建类。以下代码被大大简化。

import { Injectable, OnInit } from '@angular/core';
import { RequestOptions } from '@angular/http';
import { HttpClient, HttpClientModule, HttpHeaders } from '@angular/common/http';
import { Observable } from "rxjs/Observable"

import { Menu } from "../classes/menu";
import { MenuItem } from "../classes/menuItem";
import { menusResponseInterface } from "../interfaces/menusResponse";
import { DataService } from './data.service';
import { ConfigService } from './config.service';



@Injectable()
export class MenusService {
  private menus;
  private getMenuesObservers$;
  private getMenuesObserver;
  private getMenusStateObservers$;
  private getMenusStateObserver;
  private urls;

  constructor(
    private http: HttpClient,
    private data: DataService,
    private config: ConfigService
  ) {
    this.getMenuesObservers$ = [];
    this.menus = [];
    this.urls = {};
    this.init();
  }

  init(){
    this.getMenuesObserver = new Observable(observer => {
      this.getMenuesObservers$.push(observer);
    });
    this.getMenusStateObserver = new Observable(observer => {
      this.getMenusStateObservers$ = observer;
    });

    this.http.get(`${this.config.baseURL}/api/getMenues`).subscribe((response:menusResponseInterface) => {
      var index;

      for( index in response.menus){
        this.menus[index] = new Menu(response.menus[index]);
        this.menus[index].setMenuItems(response.pages[index]);
      }

      for( var i = 0; i< this.getMenuesObservers$.length; i++){
        this.getMenuesObservers$[i].next(this.menus);
      }
    });
  }

  public getMenues(){
    return this.getMenuesObserver;
  }


  public function getMenuItemByUrl:MenuItem(url:string){

  }

}

Menu Class创建MenuItems的树结构。

import { MenuItem } from "./menuItem";
export class Menu {
    public setMenuItems(menuItems){
        // loop data and create treeStructure of MenuItems
        menuItem = new MenuItem(menuItems);

        .
        .
        .

        menuItem.children.push(childMenuItem);
    }    
}

MenuItem类包含有关父，子，名称和URL的数据。通过向所有父母询问姓名加上自己的姓名来创建网址。我想再次将MenuService注入MenuItem类，因此我可以将所有url发送给它。我希望在MenuService中拥有所有URL，以便我可以将其与路由器URL匹配，

import { MenusService } from '../services/menus.service';
import {ReflectiveInjector} from '@angular/core';

export class MenuItem {
   public id:number;
   public name:string;
   private url:string;
   .
   .
   .

   public children:Array<MenuItem>;
   public parent:MenuItem;

   private menuService:MenusService

   constructor(
       data
   ){
       let injector = ReflectiveInjector.resolveAndCreate([MenusService]);
       this.menuService = injector.get(MenusService);
   }

   .
   .
   .

   public getUrl(){
       if(typeof(this.url) == "undefined"){
           if(typeof(this.parent) == "undefined" || this.parent.id == 0){
               this.url = encodeURI(this.name.replace(new RegExp(/ / , 'g'), '-'));
           }
           else{
               this.url = this.parent.getUrl()+'/'+encodeURI(this.name.replace(new RegExp(/ / , 'g'), '-'));
           }
           this.menuService.registerURL(this.url, this);
       }
       return this.url;
    }
}

如果它不会创建一个循环依赖，这将很好地工作。 MenuService使用Menu，它使用MenuItem，它使用MenuService。将MenuService注入MenuItem类后，我得到了循环依赖警告和应用程序中断。

如果没有这种循环依赖问题，是否有一种Angular方法可以解决这个问题？

Answer 1

这里有一些关于使用Subject回复服务的评论的详细说明：

for

Voila，MenuItem不需要导入服务。

使用服务的角度类创建了Cirular依赖

1 个答案: