Question

我有一个希望通过ngStyle加载的CSS样式列表以及ngStyle中的一个函数。但是，我只希望函数在值为true时运行，而不是根本不运行。我知道我可以运行该函数并返回一个空值，但是使用正确的标记可以节省运行它的需要。

我一直在执行函数中的条件逻辑。

<h2[ngStyle]="setStyles(h2)">H2 Content</h2>

<h5[ngStyle]="setStyles(h5)">H5 Content</h2>

在我的.ts文件中

let ifPrint = true;

let style = {
   'h2' : {'font-size' : '16px', 'font-weight' : '600'},
   'h5' : {'font-size' : '12px', 'font-weight' : '400'},
   'default' : {}
  }

setStyles(tag){
return ifPrint ? style[tag] : style['default']; 
)};

我想要类似的东西

<h2[ngStyle]="ifPrint ? setStyles(h2) : noneedtorunfunction ">H2 Content</h2>

要使此功能正常运行，我需要在noneedtorun函数中放置什么？

Answer 1

将此声明为全局变量。然后ifPrint为true或false会切换字体大小。

控制器

  public style = {
   'h2' : {'font-size' : '44px', 'font-weight' : '600'},
   'h5' : {'font-size' : '12px', 'font-weight' : '400'}
  };

模板

<h2 [ngStyle]="ifPrint ? style['h2'] : null">H2 Content</h2>

我认为这是您正在寻找的，或者是我能得到的最接近的东西。

Answer 2

这应该有效：

component.ts

ifPrint: boolean;

setStyles(tag) {
  return {
     ['h2'] : {'font-size' : '44px', 'font-weight' : '600'},
     ['h5'] : {'font-size' : '12px', 'font-weight' : '400'},
     ['default']: {}, 
 }[tag];
}

component.html

<h2 [ngStyle]="ifPrint ? setStyles('h2') : '' ">H2 Content</h2>

如果ifPrint为假，则样式属性为空。

Answer 3

解决此问题的更好方法是将样式提取到scss / css文件中，并且您的组件可以调用在scss / css文件中设置的类。

*在组件中*

  <span>
    <Icon type={type} />
    {text}
  </span>
);

ngStyle函数在条件上运行

3 个答案: