如何从 Angular 6 中的另一个组件的打字稿激活和停用组件中的样式？

Question

I have in my app.component.ts

this.renderer.listenGlobal('window', 'scroll', (event) => {
            const number = window.scrollY;
            if ((number > 150 || window.pageYOffset > 150) && this.location.prepareExternalUrl(this.location.path()) == '/') {
                // I want to activate here style .nav-item .nav-link:not(.btn) in navbar.component.html
                navbar.classList.remove('navbar-transparent');
            } else {
                // I want to deactivate here style .nav-item .nav-link:not(.btn) in navbar.component.html
                navbar.classList.add('navbar-transparent');
            }
        });

In navbar.component.html I have

<li class="nav-item" *ngIf="!isDocumentation() && !isMain() && !isCloud() && !isView()">
          <a class="nav-link" rel="tooltip" title="Follow us on Twitter" data-placement="bottom"
             href="https://example-link.com" target="_blank">
            <i class="fa fa-twitter"></i>
            <p class="d-lg-none">Twitter</p>
          </a>
        </li>

I would like to activate and deactivate styles automatically from navbar.component.scss

  .nav-item .nav-link:not(.btn){
      color: black;
      border-color: black;
  }

in app.component.ts in this place

        // I want to activate here style .nav-item .nav-link:not(.btn) in navbar.component.html
        navbar.classList.remove('navbar-transparent');
    } else {
        // I want to deactivate here style .nav-item .nav-link:not(.btn) in navbar.component.html
        navbar.classList.add('navbar-transparent');
    }

Any ideas how can I do this?

Answer 1

I think what you are looking for is the ngClass.

In the html:

<inptut [ngClass]="'navbar-transparent', boolean" />

What this will do is add the style if the boolean is true and remove it when the boolean is false. If you are using a parent child structure you can use @Input or @Output to set the value of boolean. Otherwise you can use a shared service.

Sources: https://angular.io/api/common/NgClass https://angular.io/guide/component-interaction