有时仅触发角度行为主题

debugcn 发表于 Dev

egh23692

我有一个名为数据库和服务（DatabaseService）的组件。

然后，我有一个BehaviourSubject具有当前数据库状态的应用程序，我想在应用程序组件上获取该状态。

因此，app.component.ts我订阅了BehaviourSubject。

我从BehaviourSubject获取了初始值，并且.next()在数据库服务构造函数上调用了之后获得了值，但是如果我.next()在数据库组件上进行调用，则不会在app组件上获得该值。

我已经尝试将调用.next()放在数据库服务内部的方法上，但是没有用。

Database.component.ts

@Component({
  selector: 'app-database',
  templateUrl: './database.component.html',
  styleUrls: ['./database.component.scss'],
  providers: [DatabaseService]
})


export class DatabaseComponent implements OnInit, OnDestroy {

  ...

  constructor(
      private databaseService: DatabaseService,
  ) {
  }

  ngOnInit(): void {
    ...
  }

  updateDatabaseStatus(): void {
    this.databaseService.databaseStatus.next(this.StatusId.value);
  }

  ngOnDestroy(): void {
    ...
  }
}

database.service.ts

@Injectable({
    providedIn: 'root'
  })
export class DatabaseService {

    public databaseStatus = new BehaviorSubject<DatabaseStatus>(DatabaseStatus.Open);

    constructor(private api: ApiService) {
      this.getSettingsDatabaseStatus().subscribe(data => {
        this.databaseStatus.next(data[0].statusId);
      });
    }

    public getSettingsDatabaseStatus(): Observable<Status> {
      ...
    }

    public updateCurrentDatabaseStatus(status: DatabaseStatus): void {
      this.databaseStatus.next(status);
    }
}

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit, OnDestroy {


  public databaseStatus = 'Open';

  constructor(public router: Router,
              private _api: ApiService,
              private databaseService: DatabaseService) {
  }

  ngOnInit(): void {

    this.databaseService.databaseStatus.subscribe(status => {
      this.databaseStatus = DatabaseStatus[status];
    });
  }

  ngOnDestroy(): void {
    ...
  }
}

纳姆

问题是您创建了多个DatabaseService实例。

在您的数据库服务中，代码providedIn: 'root'意味着将在应用程序的根目录下创建该服务的唯一实例。也就是说，您所有的组件都可以访问该实例。

但是，在database.component中添加了代码providers: [DatabaseService]，然后创建了该服务的新的唯一本地实例，只有该组件才能使用该实例。

我建议您从database.component中删除该代码，仅在根级别提供服务。

同样，您绝对只想.next()从数据库服务中调用该函数。

例如，您的database.component代码如下所示：

@Component({
  selector: 'app-database',
  templateUrl: './database.component.html',
  styleUrls: ['./database.component.scss']
})


export class DatabaseComponent implements OnInit, OnDestroy {

  ...

  constructor(private databaseService: DatabaseService) {
  }

  ngOnInit(): void {
    ...
  }

  updateDatabaseStatus(): void {
      this.databaseService.updateCurrentDatabaseStatus(this.StatusId.value);
  }

  ngOnDestroy(): void {
    ...
  }
}

您应该能够保留app.component和DatabaseService代码。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。