如何使用Angular中的url更改动态更改类

问题描述

我在app.html上有了一个仪表板组件，我想显示其中的所有内容，但登录或注册URL除外。因此，我试图动态添加/删除一个定义为main__hidden的类，该类基于URL对display: none进行了阻止。但是由于某种原因，它不起作用。我也尝试过在global style.css中定义样式，但这没有用。

app.html

     <app-main *ngIf="showNavbar">
    
      <router-outlet></router-outlet>
    
    </app-main>

app.ts

    export class AppComponent {
      title = 'frontend';
      public showNavbar: boolean = false
    
      constructor(private router: Router) {
        // Removing Sidebar,Navbar,Footer for Documentation,Error and Auth pages
        router.events.forEach((event) => {
          if (event instanceof NavigationStart) {
            if ((event['url'] == '/sign-in') || (event['url'] == '/sign-up')) {
              this.showNavbar = false;
              let body = document.querySelector('body');
              body.classList.add('main__hidden');
            }
          } else {
            this.showNavbar = true;
            let body = document.querySelector('body');
            body.classList.remove('main__hidden');
          }
        });
    
      }
    }

main.css

    .main__header {
      z-index: 1;
      position: fixed;
      background: #22242a;
      padding: 20px;
      width: calc(100% - 0%);
      top: 0;
      height: 30px;
      display: block;
    }
    .main__sidebar {
      z-index: 1;
      top: 0;
      background: #2f323a;
      margin-top: 70px;
      padding-top: 30px;
      position: fixed;
      left: 0;
      width: 250px;
      height: 100%;
      transition: 0.2s;
      transition-property: left;
      overflow-y: auto;
      display: block;
    }
    :host-context(.main__hidden) .main__sidebar {
      display: none;
    }
    
    :host-context(.main__hidden) .main__header {
      display: none;
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）