如果打印出案例3和“接受您的报价”，我试图使文本背景变为绿色。我想使用elementRef访问DOM，并使用if语句使用JavaScript添加背景色。我在我的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>
首先，您的视图子级在组件外部声明，应该在内部。
但是您正在尝试违背棱角分明的原则。定义一个属性并从您的标记中评估该属性，而不是使用视图子项访问DOM。
在组件样式文件中为绿色背景定义一个css / sass类：
.acceptedoffer {
background: green;
}
然后在您的组件打字稿类中，定义一个布尔属性，指示这是否是接受的要约：
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。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句