Angular里的消息(Message)显示

使用命名行创建一个Angular Component：

ng generate component messages

创建一个message service：

ng generate service message

message service的实现：其实就是内部维护了一个字符串数组，存储其他Component添加的message：

通过构造函数参数注入的方式将message service注入到hero service中：

在hero Service里消费message Service：

需要在message Component里显示message Service内部维护的字符串数组：

注意，此处11行的messageService必须定义成public，因为需要在Component view的html里使用它。

The messageService property must be public because you’re going to bind to it in the template.

Angular only binds to public component properties.

message Component的实现：

<div *ngIf="messageService.messages.length"><h2>Messages</h2><button class="clear"(click)="messageService.clear()">clear</button><div *ngFor='let message of messageService.messages'> {{message}} </div></div>

最后的效果：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Angular里的消息(Message)显示相关推荐

从qq服务器删除误收邮件,QQ邮箱撤回时显示撤回失败,对方已读收件箱里的消息却是对方已阅读或已删除这种情况下邮件有没有被删除...
QQ邮箱撤回时显示撤回失败,对方已读收件箱里的消息却是对方已阅读或已删除这种情况下邮件有没有被删除以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容 ...
QQ群设置里的“不提示消息只显示数目”与“接收不提示消息”的区别
"不提示消息只显示数目":有消息了,不会提示你,你并不知道有人说话了,但一旦拉开群的菜单就能看到此群后面括号里的数字,那数字就是已收到的消息条数,打开对话框才能看到消息: ...
SAP UI5 SimpleForm 里在水平方向显示多组 Form 元素的实现方法试读版
一套适合 SAP UI5 初学者循序渐进的学习教程本专栏计划的文章数在 300 篇左右,到 2022年9月22日为止,目前已经更新了 133 篇,专栏完成度为 44.3%. 作者简介 Jerry W ...
Android 魅族手机消息不显示(进收纳盒)和始终显示一条推送
魅族手机推送消息收不到,其实是进了收纳盒. 经查相关资料,原来是返回的通知消息的content里ContentText,含有感叹号(!)导致的.去掉就回到了消息正常显示的地方.真是够奇葩的~ 魅族手机 ...
应用启动图标未读消息数显示工具类
/* * 应用启动图标未读消息数显示工具类 (效果如:QQ.微信.未读短信等应用图标) * */ public class BadgeUtil { /** * Set badge count * ...
java如何保证mq一定被消费,RabbitMQ如何保证队列里的消息99.99%被消费？
1. 本篇概要其实,还有1种场景需要考虑:当消费者接收到消息后,还没处理完业务逻辑,消费者挂掉了,那消息也算丢失了?,比如用户下单,订单中心发送了1个消息到RabbitMQ里的队列,积分中心收到这个 ...
IM热门功能讨论：为什么微信里没有消息“已读”功能？...
本文原文由"狼和哈士奇"原创分享,本次内容有改动. 1.引言张小龙说:微信消息不做"已读"和"未读"的功能,是因为要给人撒谎的机会,这才符 ...
读取SD卡里面的BMP文件显示到TFT上
读取SD卡里面的BMP文件显示到TFT上 http://blog.csdn.net/yunxianpiaoyu/article/details/8841755 我刚好最近做了一个BMP565格式的图 ...
设置了li(float:right),里面的li反过来显示 - 解决办法
设置了li(float:right),里面的li反过来显示 - 解决办法可以让ul float:right ul里的li 依然float:left 本文转自许琴 51CTO博客,原文链接:http: ...

Angular里的消息(Message)显示

Angular里的消息(Message)显示相关推荐

最新文章

热门文章