Блог

У меня есть наблюдаемый сервис, который я использую для координации данных между компонентами. В этом случае я пытаюсь использовать его для управления тем, какие компоненты / html должны быть видны одновременно.

Когда я устанавливаю значение true для объекта поведения, на который подписывается родительский компонент, он успешно отображает дочерний компонент (transform-addedit). Однако, когда я обновляю члена службы, который управляет этим (mapAddingTransformSubj) из дочернего компонента, представление не переключается обратно, даже если я подписался в родительском. Я подтвердил, что родительский элемент правильно получает значение наблюдаемого.

Если кто-нибудь может предложить лучший способ сделать это, я был бы благодарен!

Родительский компонент html:

 <div class="container-fluid custom-container">
    <div *ngIf="!addingTransform">
        //Some html
         <button class="btn btn-default" (click)="addNewTransform()"><span class="glyphicon glyphicon-plus"></span> Add New Transformation</button>
    </div>
   <div *ngIf="addingTransform">
       <transform-addedit></transform-addedit>
   </div>
</div>
  

Родительский компонент .ts:

     //Toggles whether or not to show the Transformation components
    public addingTransform: boolean;
    active: boolean = true;

    //Subscriptions for map create service
    addingTransformSubscription: Subscription;

    //Sets the visible component to the transform add/edit component
    addNewTransform() {
        this.mapAddEditService.setAddingTransform(true);    
    }

    constructor(private _dataService: DataService, private mapAddEditService: MapAddEditService) {
        this.addingTransformSubscription = this.mapAddEditService.getAddingTransform().subscribe(addingTransform => this.addingTransform = addingTransform);
    }
    ngOnInit(): void {
    }
    ngOnDestroy(): void {
    }
}
  

Дочерний компонент .ts:

     cancelTransform() {
        this.mapAddEditService.setAddingTransform(false);
    }

    constructor(private _dataService: DataService, private mapAddEditService: MapAddEditService) {
    }
    ngOnInit(): void {
    }
  

Часть моего сервиса:

 @Injectable()
export class MapAddEditService {
    private mapAddingTransformSubj = new BehaviorSubject(false);

    setAddingTransform(addingTransform: boolean) {
        this.mapAddingTransformSubj.next(addingTransform);
    }
    getAddingTransform() {
        return this.mapAddingTransformSubj.asObservable();
    }
  

Просто решил это, и это была своего рода глупая проблема

Я понял, что ngIf проверяет инициализацию, поэтому привязка к [скрытому] в каждом из html-разделов родительского компонента вместо свойства ngIf устранила мою проблему.