Angular 5 类不适用于 ngClass 指令答案

【问题标题】：Angular 5 Classes don't get applied with ngClass directiveAngular 5 类不适用于 ngClass 指令
【发布时间】：2018-09-30 14:46:16
【问题描述】：

HTML 中的所有函数都被调用，但没有附加类。所有类都在 .css 文件中定义。该组件托管在另一个组件中。谁能看到有什么问题以及为什么没有应用类？

如果我使用 jQuery 来添加/删除 .addClass() 或 .removeClass() 类。但我想使用 Angular 工具而不是直接使用 DOM 操作。

这是我的组件

import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})

export class PopupComponent implements OnInit {  
  @Input() functionName: string;                
  @Input() fileName: string;                  
  @Input() columnName: string;                


  ngOnInit() {
    this.startPopup();
  }

  startPopup() {   
     this.setMyModalClasses(this.functionName);
     this.setFunctionInputClasses(this.functionName);
     this.setResultBodyClass(this.functionName);
  }

  setFunctionInputClasses(in: string) {     
     return { 'visually-hidden': true };    
  }

  setResultBodyClass(in: string) {    
     return { 'text-active' : false, 'image-active' : true };      
  }

  setMyModalClasses(in: string) {    
      return { 'my-modal-initial': true, 'max-height-90': true };    
  }

}

这是我的 HTML

<div class="my-modal" [ngClass]="setMyModalClasses()">
  <div class="my-modal-content">
    <div class="initial-display">
      <div id="functon-input" class="functon-input" 
                              [ngClass]="setFunctionInputClasses()">
        should not be on display
      </div>
    </div>

    <div class="result-display">
      <div id="result-body" class="result-body" 
                            [ngClass]="setResultBodyClass()">
        ABC ABC ABC
      </div>
    </div>
  </div>
</div>

【问题讨论】：

setfunctionInputClasses 的 : sring 中有一个错字。无论如何，为什么那个类函数有一个参数？它没有在 html 中使用
你在哪个.css文件中声明了那些css样式？
@KrishnanunniJeevan 感谢您指出类型。我会纠正它。但是这种类型不在我的真实代码中，只有在这里。在函数的参数处...我简化了代码以专注于这一点（当然，我在发布之前检查了我的简化代码）。
@Pengyy 根据组件定义，所有的 css 类都在 popup.component.css 文件中。

标签： angular angular5 ng-class

【解决方案1】：

函数 setMyModalClasses() 没有传入参数，但在 TS 文件中它需要一个参数。所有功能都一样。我认为 startPopup() 是不必要的

【讨论】：

你说“...没有传入参数...”是什么意思？你能为我的任何功能提供你的例子吗？

【解决方案2】：

您的函数返回样式，而不是类名，所以也许您应该尝试 [ngStyle] 而不是 [ngClass]。

【讨论】：

不，我的函数返回 css 类，当然，这些类有很多样式。
问题是 div 没有从 setFunctionInputClasses 或 class="functon-input" 获得预期的类？
我的 setFunctionInputClasses() 正在尝试向 div 添加其他类。在这种特殊情况下，它需要附加一个在 css 文件中定义的视觉隐藏类，如下所示： .visually-hidden { display: none; }
.visually-hidden 定义在哪里？在 popup.component.css 还是父组件 css？
所有的css类（包括视觉隐藏的）都在popup.component.css文件中定义。