Angular 如何随url的变化动态地改变类

我在app.html上有一个仪表板组件，我想显示其中的所有内容，除了登录或注册URL。因此，我尝试动态添加/删除一个定义为

main\uu hidden

的类，该类根据URL创建一个块来显示

display:none

。但出于某种原因，它不起作用。我也尝试过在global style.css中定义样式，但没有成功

app.html

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

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;
    }

---

在main.ts内创建一个方法

showMain（）

，并在构造函数内调用它

  public showMain = () => {
    this.router.events.forEach((event) => {
      if (event instanceof NavigationStart) {
        if ((event['url'] == '/sign-in') || (event['url'] == '/sign-up')) {
          this.hideMain = false;
          document.querySelector('.main__header').classList.add('main__hidden');
          document.querySelector('.main__sidebar').classList.add('main__hidden');
        } else {
          this.hideMain = true;
          document.querySelector('.main__header').classList.remove('main__hidden');
          document.querySelector('.main__sidebar').classList.remove('main__hidden');
        }
      }
    });
  }``` 

  public showMain = () => {
    this.router.events.forEach((event) => {
      if (event instanceof NavigationStart) {
        if ((event['url'] == '/sign-in') || (event['url'] == '/sign-up')) {
          this.hideMain = false;
          document.querySelector('.main__header').classList.add('main__hidden');
          document.querySelector('.main__sidebar').classList.add('main__hidden');
        } else {
          this.hideMain = true;
          document.querySelector('.main__header').classList.remove('main__hidden');
          document.querySelector('.main__sidebar').classList.remove('main__hidden');
        }
      }
    });
  }```