在 Angular 中导入动画模块后，JavaScript DOM 样式停止工作答案

【问题标题】：JavaScript DOM Styling Stopped Working After Importing Animation Module In Angular在 Angular 中导入动画模块后，JavaScript DOM 样式停止工作
【发布时间】：2021-07-03 14:32:33
【问题描述】：

我有标题菜单组件，可以使用 /app-header-menu> 在其他组件上重用，如果 isHomepage 为 true，则表示标题菜单显示在主页组件因此它具有透明背景和绝对位置（如您在下面的代码 sn-p 中所见）。问题是，在我导入 BrowserAnimationsModule（MatDialog 需要它）之前，一切都运行良好。不知何故，样式仅在第一次重新加载时起作用，如果我单击其他菜单，样式就会消失。我已经尝试解决这个问题好几个小时了，似乎以前没有人遇到过这个问题。

注意：这是我关于stackoverflow的第一个问题，如果缺少什么请告诉我，提前谢谢！

这里是 stackblitz 链接： https://stackblitz.com/edit/angular-ivy-41hhqz?file=src%2Fapp%2Fapp.module.ts

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    HomepageComponent,
    MostPopularComponent,
    AllPostsComponent,
    FooterComponent,
    HeaderMenuComponent,
    DetailsComponent,
    PhotoViewerDialogComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

header-menu.component.html

<div class="header__menu-bar container">
  <ul>
    <li [routerLink]="['']" routerLinkActive="active-link" [routerLinkActiveOptions]="{ exact: true }">Home</li>
    <li [routerLink]="['../all-posts']" routerLinkActive="active-link">All Posts</li>
    <li [routerLink]="['../most-popular']" routerLinkActive="active-link" >Most Popular</li>
    <li (click)="onClickContactMe()">Contact Me</li>
  </ul>
</div>

header-menu.component.ts

export class HeaderMenuComponent implements OnInit {

  private _transparentMenu: boolean;
  colorDarkBlueMenu = 'rgba(29, 60, 69, .75)';
  colorDarkBlue = 'rgba(29, 60, 69)';

  get transparentMenu(): boolean {
    return this._transparentMenu;
  }

  @Input()
  set transparentMenu(value: boolean) {
    this._transparentMenu = value;
    const homeMenuBar = document.querySelector('.header__menu-bar') as HTMLElement;
    if (value === true) {
      homeMenuBar.style.backgroundColor = this.colorDarkBlueMenu;
      homeMenuBar.style.position = 'absolute';
    } else {
      homeMenuBar.style.backgroundColor = this.colorDarkBlue;
      homeMenuBar.style.position = 'relative';
    }
  }

  constructor() {
    this._transparentMenu = true;
  }

  ngOnInit(): void {
  }
}

【问题讨论】：

欢迎来到 SO！如果您可以在 stackblitz （或类似的）上重新创建它并在此处分享它会更容易提供帮助。
嗨@Phalgun 我已经编辑了我的帖子并为其添加了一个stackblitz链接。请查收，谢谢！

标签： javascript html css angular angular-material

【解决方案1】：

您可以直接将 CSS 属性绑定到 DOM 元素中，而不是将 div 读取为 HTMLElement。

<div class="header__menu-bar container" 
[style.background]="transparentMenu?'rgba(29, 60, 69, .75)':'rgba(29, 60, 69)'"
[style.position]="transparentMenu?'absolute':'relative'">

这是 StackBlitz 示例。 https://stackblitz.com/edit/angular-ivy-gopszk

【讨论】：