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

Posted

技术标签:

【中文标题】如何从 Angular 6 中的另一个组件的打字稿中激活和停用组件中的样式?【英文标题】:How can I activate and deactivate styles in component from typescript from another component in Angular 6? 【发布时间】:2019-04-18 06:47:06 【问题描述】:

我有我的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');
            
        );

navbar.component.html我有

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

我想通过navbar.component.scss自动激活和停用样式

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

app.component.ts这个地方

        // 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');
    

任何想法我该怎么做?

【问题讨论】:

【参考方案1】:

我认为您正在寻找的是 ngClass。

在html中:

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

如果布尔值为真,则添加样式并在布尔值为假时将其删除。如果您使用的是父子结构,您可以使用@Input 或@Output 来设置布尔值。否则,您可以使用共享服务。

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

【讨论】:

以上是关于如何从 Angular 6 中的另一个组件的打字稿中激活和停用组件中的样式?的主要内容,如果未能解决你的问题,请参考以下文章

Angular5:将变量从一个组件传递到另一个打字稿文件

Angular:如何在打字稿文件中使用父组件的输入值

在 Angular 1.5 中绑定组件函数时如何利用打字稿?

如何将 Angular 2 表单输入传递给打字稿组件?

我如何遍历表单数组并将其值设置为打字稿中的另一个数组?

Angular 打字稿处理发布请求数据