专栏首页Jerry的SAP技术分享Angular里的消息(Message)显示

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>

最后的效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何在JSP里使用Java Bean

    Jerry Wang
  • CRM WebClient UI错误消息的两种显示方式比较

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • 一个nodejs里日志文件的实现

    Jerry Wang
  • php开发文章发布示例(正则表达式实例开发)

    存档: post.php 1 <form method="post" action="viewthread.php" target="_blank"> 2 ...

    Angel_Kitty
  • python分布式事务方案(二)基于消息最终一致性

    上一章采用的是tcc方案,但是在进行批量操作时,比如说几百台主机一起分配策略时,会执行很长时间,这时体验比较差。 由于zabbix隐藏域后台,而这个慢主要是集中...

    一笠风雨任生平
  • CRM WebClient UI错误消息的两种显示方式比较

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • 如何在JSP里使用Java Bean

    Jerry Wang
  • python实现rsa加密

    Before encrypted: sanxi Now is better than never.

    py3study
  • 仅使用少量数据训练生成对抗网络

    和昨天的推文一样,同样是一篇研究在少量样本下,训练生成对抗网络的论文。这篇文章和昨天推文(加一个link)的假设类似:在数据不足的情况下,生成对抗网络中的判别器...

    BBuf
  • 防守式编程的艺术

    原文地址:The Art of Defensive Programming 防守式编程的艺术 为什么开发人员不编写安全代码? 我们不再在这里讨论 “干净的代码”...

    搜云库

扫码关注云+社区

领取腾讯云代金券