[英]Can`t assign values to object`s properties in Angular service
Service has the empty object "message". 服务具有空对象“消息”。 I assign its property values through "add()" method. 我通过“ add()”方法分配其属性值。 Logs show that values are assigned. 日志显示已分配值。 But when I want to get it from the component directly or through a getter, the properties are still undefined, which is confirmed by the log() method in the getter. 但是,当我想直接从组件或通过getter获取它时,属性仍然是未定义的,这由getter中的log()方法确认。
I am new in Angular, as well as in TS, so I guess I don`t see an obvious mistake. 我在Angular和TS中都是新手,所以我想我看不到明显的错误。 Thank you in advance for any help. 预先感谢您的任何帮助。
Message object: 消息对象:
export class Message {
messageText: string;
messageStatus: MessageStatus;
}
MessageStatus enum: MessageStatus枚举:
export enum MessageStatus {
INFO,
SUCCESS,
ERROR,
WARN
}
Service: 服务:
import {Injectable} from '@angular/core';
import {Message} from '../../model/message';
import {log} from 'util';
@Injectable({
providedIn: 'root'
})
export class MessageService {
private message: Message = new Message();
constructor() { }
public add(message: Message): void {
this.message = message
log('MESSAGE in add: ' + this.message.messageText +', STATUS in add: ' + this.message.messageStatus);
}
public getMessage(): Message {
log('MESSAGE in get: ' + this.message.messageText +', STATUS in get: ' + this.message.messageStatus);
return this.message;
}
public clear(): void {
this.message = new Message();
}
}
Component: 零件:
import { Component, OnInit } from '@angular/core';
import {MessageService} from '../../service/messages/message.service';
import {MessageStatus} from '../../service/messages/messageStatus';
@Component({
selector: 'app-messages',
template: `
<div class="message-position" *ngIf="messageService.getMessage().messageText">
<div [ngClass]="{
'alert alert-info': messageService.getMessage().messageStatus === MessageStatus.INFO,
'alert alert-success': messageService.getMessage().messageStatus === MessageStatus.SUCCESS,
'alert alert-danger': messageService.getMessage().messageStatus === MessageStatus.ERROR,
'alert alert-warning': messageService.getMessage().messageStatus === MessageStatus.WARN
}">
{{messageService.getMessage().messageText}}
<button class="btn btn-primary" (click)="messageService.clear()">Ok</button>
</div>
</div>`,
styleUrls: ['./messages.component.scss']
})
export class MessagesComponent{
constructor(public messageService: MessageService) { }
}
log() output in add(), shows that object properties received values: add()中的log()输出显示对象属性收到的值:
25 Nov 19:05:22 - MESSAGE in add: Customer not found, STATUS in add: 3 25 Nov 19:05:22-添加消息:未找到客户,添加状态:3
log() output in getMessage(), object properties are still underfined: 在getMessage()中的log()输出中,对象属性仍然不够完善:
25 Nov 19:05:22 - MESSAGE in get: undefined, STATUS in get: undefined 25 Nov 19:05:22-get中的消息:未定义,get中的状态:未定义
UPDATE: 更新:
The method that calls add(). 调用add()的方法。 Placed in different class: 放在不同的类中:
private messageService: MessageService = new MessageService();
private message: Message = new Message();
logResponce(messageText: string, messageStatus: MessageStatus): void {
this.message.messageText = messageText;
this.message.messageStatus = messageStatus;
this.messageService.add(this.message);
}
new MessageService()
that creates a new instance of the service. 创建服务的新实例。 You don't want that. 你不要那样 You want to use the singleton instance that is created by Angular and injected in the component. 您要使用由Angular创建并注入到组件中的单例实例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.