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

Question

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

注：这是我在Whosebug上的第一个问题，如果有什么不足请告诉我，提前谢谢！

这里是 stackblitz link： 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 {
  }
}

Answer 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

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

JavaScript DOM Styling Stopped Working After Importing Animation Module In Angular

html

javascript

css

angular-material

angular