Question

Angular版本：5.0.3

我已将我的代码here。

我制作了自定义墨块模块，并将其导入应用程序。我用

<lib-inkbar [nextEle]="inkbarSubject" [color]="inkbarColor"></lib-inkbar>

...将其安装在app.component。

中

导航菜单选项卡下的墨水栏预计会自动进入路由器链接当前处于活动状态的位置。（这是通过获取给定元素的宽度和偏移量来完成的，然后移动到它。）例如，在开头，“/ index”处于活动状态，因此“Index”选项卡有一个“active”类，并且墨盒应该在它下面翻译。

我通过将代码放在Angular的ngAfterViewChecked生命周期中来实现这一目标。 inkbarMove()通过告诉墨迹栏元素（即活动的导航标签）告诉墨迹栏去哪里。

ngAfterViewChecked() {
  this.navMenus = this.ul.nativeElement.children;
  let actMenu = this.getAvtiveMenu();
  if (actMenu) {
    this.inkbarMove(actMenu);
  }
}

inkbarMove = (ele: HTMLBaseElement | MouseEvent) => {
  if (ele instanceof MouseEvent) {
    ele = ele.target as HTMLBaseElement;
  }
  this.inkbarSubject.next(ele);
};

但是，这只适用于下一次ngAfterViewChecked()次火灾后。当页面首次加载时，不管我告诉它多少次“移动”，墨盒将保持{width: 0px; left: 0px}样式作为初始默认值（我甚至写了一个for循环，其中让我的浏览器崩溃，但仍然没有工作大声笑）。只有在按下按钮并再次手动调用ngAfterViewChecked()后，它才会开始移动。

有人知道这里发生了什么吗？

Angular子组件样式在下次ngAfterViewChecked之前不会更改

0 个答案: