Angular 2 Parent View не обновляется после наблюдаемого изменения

У меня есть служба Observable, которую я использую для координации данных между компонентами. В этом случае я пытаюсь использовать его для управления тем, какие компоненты/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();
    }

person Deej    schedule 19.10.2016    source источник


Ответы (1)


Только что решил это, и это была глупая проблема

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

person Deej    schedule 19.10.2016