Question

好吧，我试图通过使用元素的宽度来更改侧边栏中隐藏文本之后的边距，但是在隐藏文本之前它就获得了价值，我该如何解决呢？

TS

toggle_menu_text() {
    this.menu_bar_status = !this.menu_bar_status;
    this.change_margin();
  }
  change_margin() {
    this.side_bar_width = document.getElementById('side_nav_width').offsetWidth;
    console.log(this.side_bar_width);
  }

HTML

<mat-sidenav-content [style.margin-left.px] = "side_bar_width">

GIF

Answer 1

您必须留出时间将组件中的更改呈现给DOM。

一种实现方法是在下一个JavaScript周期中使用window.setTimeout()执行change_margin()。

toggle_menu_text() {
    this.menu_bar_status = !this.menu_bar_status;
    window.setTimeout(()=>this.change_margin());
}

以上内容将延迟对函数的调用，但现在更改检测将不起作用。因此，我们必须使用区域在Angular中运行回调。您可以通过将NgZone注入组件的构造函数并调用run()方法来使用区域。

toggle_menu_text() {
    this.menu_bar_status = !this.menu_bar_status;
    window.setTimeout(()=> this.zone.run(()=>this.change_margin()));
}

已更新：

如评论中所指出。我认为您不需要将区域与setTimeout()一起使用。

When should i use zone.run in angular 2

完成方法后如何调用方法？

1 个答案: