Question

我正在使用Angular 4，我想问一下执行以下操作的最佳做法是什么：

我需要在 div 或 p 内“标记”（红色的样式）负数。有时我需要进行计算（调用函数），该函数将产生负数或正数（货币类型），否则整个文本将来自数据库。

最佳做法是什么？我应该使用Pipe和Directive吗？

示例：Lorem ipsum dolor sit amet，consectetuer $ -123.45 adipiscing ELIT。 Aenean commodo ligula eget $ 456.78 dolor。

在上面的文字中，我应该在找到负值时将其设置为红色，并在找到正值时保持不变。使用Pipe我可以搜索' - '符号但是如何避免检查两次元素？

谢谢。

Answer 1

使用ngclass或ngstyle，即

<span [ngClass]="{'classRed':money<0}">{{money}}</span>

一个完整的例子

import { Component } from '@angular/core';
import { NgModel } from '@angular/forms';

@Component({
  selector: 'sample-app',
  template: `
      <p *ngFor="let item of myList; let idx = index">
        {{item.texto}}\t<span [ngClass]="{'classRed':item.money<0}">    {{item.money}}</span>
      </p>
  `,
  styles:[`
           .classRed {
                color: #ff0000;
           }
         `],
})
export class AppComponent {
  myList=[
            {"texto":"texto1","money":3.2},
            {"texto":"texto2","money":-10.2},
            {"texto":"texto3","money":-4.5},
            {"texto":"texto4","money":-9.2}
            ]
}

Answer 2

这是我的工作答案。它适用于任何元素。

用法：打开你的app.module.ts并插入：

import { chknegDirective } from './chkneg.directive';

和@ngModule：chknegDirective

然后在任何html标签中使用它：

<p chkneg>Using P = Lorem ipsum dolor sit -123.45 amet, consectetur -456.76 adipisicing elit. Vel commodi.</p>

这是文件（我叫chkneg.directive.ts）

import { Directive, ElementRef, AfterContentInit } from '@angular/core';

@Directive({ selector: '[chkneg]' })
export class chknegDirective {

    constructor(private el: ElementRef) { }

    ngAfterViewInit(){
        let str = this.el.nativeElement.innerHTML;
        this.el.nativeElement.innerHTML = this.chkNegativeNumber(str);
    }

    chkNegativeNumber(str) {
        function addSpan(match, offset, string) {
          return (offset ? '<span style="color: red">'+match+'</span>' : '')
        }
        return str.replace(/[-][0-9]{1,9}(?:\.[0-9]{1,4})/g, addSpan);
    }
}

使用Pipe + Directive为元素设置样式

2 个答案: