时间戳

首页 > 解决方案 > JavaScript DOM 样式在 Angular 中导入动画模块后停止工作

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

问题描述

我有标题菜单组件，可以使用 <app-header-menu [transparentMenu]="isHomepage">/app-header-menu> 在其他组件上重用，如果 isHomepage 为真，则表示标题菜单显示在主页组件中它具有透明背景和绝对位置（如您在下面的代码片段中所见）。问题是，在我导入 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 {
  }
}

标签： javascripthtmlcssangularangular-material

解决方案

您可以直接将 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

推荐阅读