Angular：解决订阅中的渲染

Question

我想在“noRender”更改时对 DOM 进行一些更改。 'noRender' 隐藏所有 DOM 并在 subscribe 方法中更改。我试过'onChanges' - 它没有用。我决定在 subscribe 方法里面写代码，但是在 subscribe 方法完成之后才执行重新渲染。怎么解决？请帮忙

this.http.post(Main.BASE_URL + StaticData.SIGN_URL, {})
  .subscribe((value: Response) => {
    this.noRender = false;
    if(document.querySelector('.steps-list-line')){
        (document.querySelector('.steps-list-line') as HTMLElement).style.width =
        (document.querySelector('.active') as HTMLElement).offsetWidth +
        (document.querySelector('.active') as HTMLElement).offsetLeft + 'px';
    }
  } 
});

Answer 1

示例 1

要检测noRender 变量中值的变化，您可以将此变量的类型更改为BehaviorSubject<boolean>。因此，您有机会订阅数据流。

export class SomeComponent{

    noRender = new BehaviorSubject<boolean>(false);

    constructor() {
        this.noRender.subscribe((newValue) => {
            // handle value changed
        });
    }

    someAction() {
        // change value of the noRender subject
        this.noRender.next(true);
    }

}

示例 2

如果noRender 变量是输入属性，您可以使用property-watch-decorator（链接：https://www.npmjs.com/package/property-watch-decorator），它允许检测输入属性的变化。

export class SomeComponent{

    @OnChange(function(this: SomeComponent, newValue: boolean){
        // handle value changed
    })
    @Input() noRender: boolean;

}