Angular BehaviorSubject在延迟加载的模块内不断重置

我正在尝试为延迟加载的模块实现一个

facade.service

闪电战

---

门面

@Injectable()
export class TaFacadeService {
  private _state: TAState;
  private _store: BehaviorSubject<TAState>;
  private _state$: Observable<TAState>;

  ano$: Observable<number>;
  loading$: Observable<boolean>;
  mes$: Observable<number>;
  tarjetas$: Observable<DatoListaAmarilla[]>;
  url$: Observable<string>;
  rutaSubscription: Subscription;
  codUser: string;
  urlEp: any;

  /**
   * Viewmodel que computa el estado completo una vez que esta listo
   * o es actualizado
   */
  vm$: Observable<TAState> = combineLatest(
    this.ano$,
    this.loading$,
    this.mes$,
    this.tarjetas$,
    this.url$
  ).pipe(
    map(([ano, loading, mes, tarjetas, url]) => {
      return { ano, loading, mes, tarjetas, url };
    })
  );

  /**
   * Vigilar 2 streams para desencadenar la busqueda de las tarjetas
   * y el update del state
   */
  constructor(private http: HttpClient, private authService: AuthService) {
    console.log(`// ----------------------- //`);
    console.log(`Facade Service Instanciated`);
    console.log(`// ----------------------- //`);
    this._state = {
      ano: new Date().getFullYear(),
      loading: false,
      mes: new Date().getMonth() + 1,
      tarjetas: [],
      url: ""
    };

    this.urlEp = {
      emitidas: "Emitida",
      recibidas: "Recibida",
      prevencion: "Prevencion",
      zonal: "JefeZonal",
      comite: "Comite",
      detalle: "Detalle",
      persona: "Todos",
      ejecutor: "Ejecutor",
      ver: "Todos"
    };

    this._store = new BehaviorSubject<TAState>(this._state);
    this._state$ = this._store.asObservable();

    this.ano$ = this._state$.pipe(
      map(state => state.ano),
      tap(state => console.log(`Ano es: ${state}`)),
      distinctUntilChanged()
    );
    this.loading$ = this._state$.pipe(
      map(state => state.loading),
      tap(state => console.log(`Loading es: ${state}`)),
      distinctUntilChanged()
    );
    this.mes$ = this._state$.pipe(
      map(state => state.mes),
      tap(state => console.log(`Mes es: ${state}`)),
      distinctUntilChanged()
    );
    this.tarjetas$ = this._state$.pipe(
      map(state => state.tarjetas),
      tap(state => console.log(`tarjetas es:`, state)),
      distinctUntilChanged()
    );
    this.url$ = this._state$.pipe(
      map(state => state.url),
      tap(state => console.log(`url$ es: ${state}`)),
      distinctUntilChanged()
    );

    this.codUser = this.authService.user;
    combineLatest(this.ano$, this.mes$, this.url$)
      .pipe(
        switchMap(([ano, mes, url]) => {
          if (!url) {
            console.log(`url es desde switchmap: ${url}`);
            return of(null);
          }
          return this.getTarjetasAmarillas(url, ano, mes);
        })
      )
      .subscribe(tarjetas => {
        console.log(`tarjetas del subscribe es:`, tarjetas);
        this.updateState({ ...this._state, tarjetas, loading: false });
      });
  }

  getStateSnapshop(): TAState {
    return { ...this._state };
  }

  buildSerchControls(): FormGroup {
    const form = new FormGroup({
      ano: new FormControl("", Validators.required),
      mes: new FormControl("", Validators.required)
    });

    form
      .get("ano")
      .valueChanges.pipe(
        debounceTime(300),
        distinctUntilChanged()
      )
      .subscribe(ano => this.updateAno(ano));
    form
      .get("mes")
      .valueChanges.pipe(
        debounceTime(300),
        distinctUntilChanged()
      )
      .subscribe(mes => this.updateMes(mes));
    return form;
  }

  buildUrl(userCod: string, tipo: string, ano: number, mes?: number) {
    const URL = "SOMEURL";
    const tipoTA = tipo;

    //     // var urlFull = this.url + "TaLista?Tipo=Todos&Cod=" + Año + ":" + Mes;
    const u = `${URL}TaLista?Tipo=${tipoTA}&Cod=`;
    // const user = this.authService.user;
    if (tipoTA === "JefeZonal") {
      return `${u}${ano}:${mes}:${userCod}`;
    } else if (
      tipoTA === "Prevencion" ||
      tipoTA === "Comite" ||
      tipoTA === "Todos"
    ) {
      return `${u}${ano}:${mes}`;
    } else if (tipoTA === "Detalle") {
      return `${u}${ano}`;
    } else {
      return `${u}${userCod}:${ano}:${mes}`;
    }
  }

  updateMes(mes: number) {
    this.updateState({ ...this._state, mes, loading: true });
  }

  updateAno(ano: number) {
    this.updateState({ ...this._state, ano, loading: true });
  }

  updateUrl(url: string) {
    console.log(`updating url... new url is ${url}`);
    this.updateState({ ...this._state, url: this.urlEp[url], loading: true });
  }

  // --------------------- Private Methods ------------------------

  private updateState(state: TAState) {
    this._store.next(state);
  }

  /**
   * Obtener tarjetas amarillas segun ano y mes
   */
  getTarjetasAmarillas(url: string, ano: number, mes?: number) {
    const httpUrl = this.buildUrl(this.codUser, url, ano, mes);
    console.log(`url es: ${httpUrl}`);
    return this.http.get<DatoListaAmarilla[]>(httpUrl);
  }
}

@Injectable（）
出口级TaFacadeService{
私人州：塔斯塔特；
私人商店：行为主体；
私有_状态$：可观察；
ano$：可观察的；
加载$：可观察；
mes$：可观察的；
tarjetas$：可观察；
url$：可观察的；
ruta订阅：订阅；
密码用户：字符串；
urlEp：任何；
/**
*Viewmodel que computa el estado completo una vez que esta listo
*我是扎多
*/
vm$：可观察=组合相关测试(
这个,这个,，
这是。正在加载$，
这个.mes$，
这是tarjetas$，
这个网址$
).烟斗(
地图（（[ano，加载，mes，tarjetas，url]）=>{
返回{ano，loading，mes，tarjetas，url}；
})
);
/**
*塔吉塔斯布斯克达附近的2条溪流
*更新状态
*/
构造函数（私有http:HttpClient，私有authService:authService）{
console.log（`/--------------------------/`）；
log（`Facade Service instanced`）；
console.log（`/--------------------------/`）；
此状态={
否：新日期（）.getFullYear（），
加载：false，
mes：新日期（）.getMonth（）+1，
tarjetas:[]，
网址：“
};
this.urlEp={
艾米蒂达斯：“艾米蒂达斯”，
累西比达：“累西比达”，
预防：“预防”，
地带性：“JefeZonal”，
comite:“comite”，
德塔利：“德塔利”，
人物角色：“待办事项”，
ejector：“ejector”，
版本：“待办事项”
};
this.\u store=新行为主体（this.\u状态）；
this.\u state$=this.\u store.asObservable（）；
this.ano$=this.\u state$.pipe(
映射（state=>state.ano），
轻触（state=>console.log（`Ano es:${state}`）），
distinctUntilChanged（）
);
this.loading$=this.\u state$.pipe(
映射（state=>state.loading），
点击（state=>console.log（`Loading es:${state}`）），
distinctUntilChanged（）
);
this.mes$=this.\u state$.pipe(
映射（state=>state.mes），
点击（state=>console.log（`meses:${state}`）），
distinctUntilChanged（）
);
this.tarjetas$=this.\u state$.pipe(
映射（state=>state.tarjetas），
点击（state=>console.log（`tarjetases:`，state）），
distinctUntilChanged（）
);
this.url$=this.\u state$.pipe(
映射（state=>state.url），
轻触（state=>console.log（`url$es:${state}`）），
distinctUntilChanged（）
);
this.codUser=this.authService.user；
CombineTest（this.ano$、this.mes$、this.url$）
.烟斗(
开关映射（[ano、mes、url]）=>{
如果（！url）{
log（`url-es-desde-switchmap:${url}`）；
返回（空）；
}
返回这个.getTarjetasAmarillas（url、ano、mes）；
})
)
.订阅（tarjetas=>{
log（`tarjetas del subscribe:`，tarjetas）；
this.updateState（{…this.\u state，tarjetas，load:false}）；
});
}
getStateSnapshop（）：TAState{
返回{…this.\u state}；
}
buildSerchControls（）：FormGroup{
const form=new FormGroup({
ano：新FormControl（“，需要验证程序），
mes：新FormControl（“，验证器。必需）
});
形式
.get（“ano”）
.水管(
去BounceTime（300），
distinctUntilChanged（）
)
.subscribe（ano=>this.updateAno（ano））；
形式
.get（“mes”）
.水管(
去BounceTime（300），
distinctUntilChanged（）
)
.subscribe（mes=>this.updateMes（mes））；
申报表；
}
buildUrl（userCod:string、tipo:string、ano:number、mes？：number）{
const URL=“SOMEURL”；
const tipoTA=tipo；
////var urlFull=this.url+“TaLista？Tipo=Todos&Cod=“+Año+”：“+Mes；
const u=`${URL}TaLista？Tipo=${tipoTA}&Cod=`；
//const user=this.authService.user；
如果（蒂波塔==“杰菲佐纳尔”）{
返回`${u}${ano}:${mes}:${userCod}`；
}否则如果(
蒂波塔==“预测”||
蒂波塔==“委员会”||
蒂波塔==“待办事项”
) {
返回`${u}${ano}:${mes}`；
}否则如果（蒂波塔==“德塔莱”）{
返回`${u}${ano}`；
}否则{
返回`${u}${userCod}:${ano}:${mes}`；
}
}
更新项（mes:编号）{
this.updateState（{…this.\u state，mes，load:true}）；
}
updateAno（ano:number）{
this.updateState（{…this.\u state，ano，load:true}）；
}
updateUrl（url:string）{
log（`更新url…新url为${url}`）；
this.updateState（{…this.\u state，url:this.urlEp[url]，loading:true}）；
}
//--------------私有方法------------------------
私人地产（州：TAState）{
此._存储。下一个（状态）；
}
/**
*阿马里拉酒店
*/
getTarjetasAmarillas（url:string，ano:number，mes？：number）{
const httpUrl=this.buildUrl（this.codUser，url，ano，mes）；
log（`url es:${httpUrl}`）；
返回此.http.get（httpUrl）；
}
}

此服务跟踪所有可观察对象，并创建

表单

，并将其发送给包含搜索词的子组件

应用程序结构 一个根

app.module

，一个

core.module

注入到app模块中，在

shared.module

上，根据需要导入到不同的地方，4个同级延迟加载模块，其中一个是我尝试实现此外观的地方

这一切都是从我看到

我试过了

正在设置此服务中的“根目录”中提供的

将此服务注入根目录下的

@NgModule

提供程序

数组中
将其注入核心
@NgModule
其中位于文件夹结构中
此服务存在于src/app/core/services中，它导出到桶
index.ts
文件中

chrome的devtool co.的一些输出