代码之家 › 专栏 › 技术社区 › Muhammed Ozdogan

角度6主题订阅不工作

reactivex observable typescript angular javascript

Muhammed Ozdogan · 技术社区 · 7 年前

http interceptor 它在请求开始和结束时发出“字符串”:

@Injectable({
  providedIn: 'root'
})
export class LoadingIndicatorService implements HttpInterceptor {

  private loadingIndicatorSource = new  Subject<string>();
  private loadingIndicator$ = this.loadingIndicatorSource.asObservable();

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.updateVisibility('block');
    return next.handle(req)
      .pipe(
        finalize(
          () => {
            this.updateVisibility('none');
          }
        )
      )
      ;
  }

  updateVisibility(state: string) {
    this.loadingIndicatorSource.next(state);
  }

  getLoadingIndicator() {
    return this.loadingIndicator$;
  }
}

export class AppComponent {


  display = 'none';

  constructor(public  authenticationService: AuthenticationService,
              public loadingIndicatorService: LoadingIndicatorService) {
    this.loadingIndicatorService.getLoadingIndicator().subscribe(visibility => {
      console.log(visibility);
      this.display = visibility;
    });

    }
  }

实际上,我想显示一个装载指示器:

 <div [style.display]="display">
    <mat-progress-bar mode="indeterminate" color="warn" ></mat-progress-bar>
  </div>

我流动 this

但是subscribe方法永远不会执行。

为什么订阅方法不起作用?

1 回复 | 直到 7 年前

Nico 7 年前

我要做的是创建一个SpinnerService和一个spinnerchiptor,而不是将它们合并在一起。

使微调器服务分配未完成请求的数量,并在未完成请求大于0时显示微调器。

@Injectable()
export class SpinnerService {
    private requestAmount$ = new BehaviorSubject(0);

public showSpinner$ = this.requestAmount$.asObservable().pipe(map(r => r > 0));

requestStart() {
    this.requestAmount$.next(this.requestAmount$.getValue() + 1);
}

requestEnd() {
    this.requestAmount$.next(this.requestAmount$.getValue() - 1);
}
}

@Injectable()
export class SpinnerInterceptor implements HttpInterceptor {
    constructor(private spinnerService: SpinnerService) {}

intercept(req: HttpRequest<any>, next: HttpHandler) {
        this.spinnerService.requestStart();

        return next.handle(req).pipe(
            finalize(() => {
                this.spinnerService.requestEnd();
            })
        );
    }
}

在应用程序组件中使用 ngOnInit 钩子不使用它与样式指南相反的构造函数。

export class AppComponent implements OnInit{


  display = 'none';

  constructor(public  authenticationService: AuthenticationService,
              public spinnerService: SpinnerService) {}
ngOnInit(){
    this.spinnerService.showSpinner$.subscribe(visibility => {
      console.log(visibility);
      this.display = visibility ? 'block': 'none';
    });

    }
  }

希望这有帮助!

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前