如何将通过消息服务传入的字符串加粗？

Question

我的服务如下所示：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MessageService {
  messages: string[] = [];

  add(message: string) {
    this.messages.push(message);
  }

  clear() {
    this.messages = [];
  }
}

关联组件的 HTML 如下所示：

<div>
    <h4>Status Messages:</h4>
    <div *ngFor='let message of messageService.messages'> {{message}} </div>
  </div>

我通常在其他组件中这样调用它：

this.messageService.add('Completed all current actions.')

假设我只想将“已完成”这个词加粗。关于如何做到这一点有什么想法吗？

Answer 1

你只需要改变你的数据模型。

可以定义Message，表示单句，单词数组，需要高亮。

export interface Message {
    text: string;
    wordsToHighlight: string[];
}

然后在消息数组的迭代过程中，创建 html 字符串并使用 HTML 元素的内部 HTML 或外部 HTML 属性来呈现它。注意下面的getHighlightedText方法。

您的组件可能如下所示：

@Component({
    selector: 'app-demo',
    template: `
        <div *ngFor="let message of messages" [outerHTML]="getHighlightedText(message)"></div>
    `
})
export class DemoComponent implements OnInit {

    messages: Message[];

    constructor(private readonly messageService: MessageService) {}

    ngOnInit(): void {
        this.messages = this.messageService.messages;
        this.messageService.add({ text: 'Completed all current actions', wordsToHighlight: ['all', 'actions'] })
    }

    getHighlightedText(message: Message): string {
        const words = message.text.split(' ');

        return words.map((word) => {
            const highlight = message.wordsToHighlight.some((wordToHighlight) => word.toLowerCase() === wordToHighlight.toLowerCase());

            if (highlight) {
                return `<b>${word}</b>`;
            } else {
                return word;
            }
        }).join(' ');
    }
}

消息服务：

@Injectable({
    providedIn: 'root',
})
export class MessageService {
    messages: Message[] = [];

    add(message: Message) {
        this.messages.push(message);
    }

    clear() {
        this.messages = [];
    }
}

如何将通过消息服务传入的字符串加粗？

How do I bold a String that I'm passing in through a message service?

html

service

components

typescript

angular