If 语句和 ElementRef 更改背景颜色不起作用 [Angular]

Question

如果打印了案例 3​​ 和“Accepted your offer”，我正在尝试将文本的背景设为绿色。我想使用 elementRef 访问 DOM 和 javascript 以使用 if 语句添加背景颜色。我在我的 component.ts 文件后面添加了 if 语句，但是它破坏了程序，在此之前它工作正常并且打印正确。控制台上不显示任何错误消息。如何使用此方法实现更改背景颜色所需的行为？提前致谢。这是我的 .component.ts 和 .html 文件：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@ViewChild('latestSystemMessage', { static: true })
latestSystemMessage: ElementRef;

export class MessagesComponent implements OnInit {

getLatestSystemMessage(thread: Thread): string {
        const message = thread.messages.slice().reverse().find(m => m.type !== 0);

        const isUserOwner = thread.project.user.id === this.user.id;

        let content = '';

        if (message) {
            switch (message.type) {
                case 1:
                    if (<any>message.content > 0) {
                        content = isUserOwner ?
                            `Offered you $${message.content}` :
                            `You offered $${message.content}`;
                    } else {
                        content = isUserOwner ?
                            `Offered to translate for free` :
                            `You offered to translate for free`;
                    }
                    break;
                case 2:
                    content = isUserOwner ?
                        'Cancelled offer' :
                        'You cancelled your offer';
                    break;
                case 3:
                    content = isUserOwner ?
                        'You accepted the offer' :
                        'Accepted your offer';
                    break;
                case 4:
                    content = isUserOwner ?
                        "You accepted another translator's offer" :
                        "Accepted another translator's offer";
                    break;
            }
        }
        
        if(this.latestSystemMessage.nativeElement === "Accepted your offer" ){
            this.latestSystemMessage.nativeElement.style.backgroundColor="green";
        }else{};

        return content;
    }

这是我的 .html 文件

<p class="mb-0" #latestSystemMessage><strong>{{getLatestSystemMessage(thread)}}</strong></p>

Answer 1

首先，您的子视图是在组件外部声明的，它应该在内部。

但是你试图违背角度原则。 不要使用 viewchild 访问 DOM，而是定义一个属性并从您的标记中评估该属性。

在你的组件样式文件中为你的绿色背景定义一个 css/sass 类：

.acceptedoffer {
   background: green;
}

然后在您的组件 typescript 类中，定义一个布尔属性，指示这是否是一个接受的提议：

export class MessagesComponent implements OnInit {
isAcceptedOffer: boolean = false;

在正确的时间在 getLatestSystemMessage 方法中设置该属性并摆脱 viewchild。

为了遵循您当前的业务逻辑，我在您的案例 3 中添加了这一行：

this.isAcceptedOffer = !isUserOwner;

您的组件现在应该如下所示：

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

export class MessagesComponent implements OnInit {
isAcceptedOffer: boolean = false;

getLatestSystemMessage(thread: Thread): string {
        const message = thread.messages.slice().reverse().find(m => m.type !== 0);

        const isUserOwner = thread.project.user.id === this.user.id;

        let content = '';

        if (message) {
            switch (message.type) {
                case 1:
                    if (<any>message.content > 0) {
                        content = isUserOwner ?
                            `Offered you $${message.content}` :
                            `You offered $${message.content}`;
                    } else {
                        content = isUserOwner ?
                            `Offered to translate for free` :
                            `You offered to translate for free`;
                    }
                    break;
                case 2:
                    content = isUserOwner ?
                        'Cancelled offer' :
                        'You cancelled your offer';
                    break;
                case 3:
                    this.isAcceptedOffer = !isUserOwner;
                    content = isUserOwner ?
                        'You accepted the offer' :
                        'Accepted your offer';
                    break;
                case 4:
                    content = isUserOwner ?
                        "You accepted another translator's offer" :
                        "Accepted another translator's offer";
                    break;
            }
        }

        return content;
    }

最后但并非最不重要的是，在您的标记中，有条件地将您的 css 类添加到 isAcceptedOffer 的值为 true，并删除视图子声明：

<p class="mb-0" [class.acceptedoffer]="isAcceptedOffer"><strong>{{getLatestSystemMessage(thread)}}</strong></p>

现在我意识到您可能只共享了组件的一小部分代码，并且可能会增加一些复杂性，但我仍然认为您应该尝试重构并按照 Angular 的使用方式来使用它。