*ngif使用公共服务变量

Question

我有一个加载器组件，我想显示它时，任何按钮被点击。为此，我使用ngif调用加载程序组件，并试图使用服务变量更新ngif的变量。我正在从其他组件更新该服务变量。

共同服务：

export class DboperationService {
  private _componentVisible$: Subject<boolean>;
constructor(private _http: Http) {
    this._componentVisible$ = <Subject<boolean>>new Subject();
  }
get componentVisible$(){
    return this._componentVisible$.asObservable();
  }

  changeState(state:boolean){
    // alert('change service called');
    this._componentVisible$.next(state);
  }
}

Loader实现类:

export class TabsComponent implements OnInit {

  constructor(private dbservice:DboperationService) { }
  public showLoader = false;

  public setLoder() {
    // alert('form copoenent loader state called');
      if(this.dbservice.componentVisible$){
         this.showLoader=true;
      }else{
        this.showLoader=false;
      }
    }
}

服务Varibale更新类:

export class LeadadmincontentComponent implements OnInit {
  constructor(private dbservice: DboperationService) { }
 saveLead(){
    this.dbservice.changeState(true);
    this.uploadleadscomponent.saveLead();
  }
}

请帮我弄清楚这里面有什么问题。

Answer 1

loader.service.ts

export interface LoaderState {
    show: boolean;
}

@Injectable()
export class LoaderService {
    private loaderSubject = new Subject<LoaderState>();
    loaderState = this.loaderSubject.asObservable();
    constructor() { }
    show() {
        this.loaderSubject.next(<LoaderState>{ show: true });
    }
    hide() {
        this.loaderSubject.next(<LoaderState>{ show: false });
    }
}

loader.component.ts

@Component({
    selector: "loader",
    template: `<div [class.hidden]="!show"></div>`,
    // you can style this so that your component shows as an overlay for instance
    styles: [".hidden {visibility: hidden;}"]
})
export class LoaderComponent implements OnInit {
    show = false;
    public subscription: Subscription;
    constructor(
        private loaderService: LoaderService
    ) { }

    ngOnInit() {
        this.subscription = this.loaderService.loaderState
            .subscribe((state: LoaderState) => {
                this.show = state.show;
            });
    }

    ngOnDestroy() {
        if (this.subscription)
            this.subscription.unsubscribe();
    }
}

in your.component.ts

export class AppComponent implements OnInit {
      constructor(private loader: LoaderService) { }
     action(){
        this.loader.show();
      }
    }

Answer 2

在模板中添加ngx-loading

<ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px'}"></ngx-loading>

在组件中，最初将其设置为false并相应地更改它。

public loading = false;
   saveLead(){
    this.loading = true
    this.dbservice.changeState(true);
    this.loading = false
  }