Pusher 测试 Nofitifcations - Angular 2

Question

我目前正在学习使用第三方应用程序 Pusher 发送实时通知的教程。我能够发送事件并接收客户端的通知，但我的问题是，我希望通知在发送后在通知选项卡中进行跟踪。一旦弹出，它必须在通知中进行跟踪。 正如它在图像中显示的那样，该事件正在被触发，但它也必须出现在通知选项卡中。是否可以从推送器仪表板获取发送的事件。

通知标签

<ul class="nav navbar-nav navbar-right navbar-user">
        <li class="dropdown messages-dropdown">
          <a href="#" class="dropdown-toggle"  data-toggle="dropdown"><i class="fa fa-envelope"></i>  Notifications <b class="caret"></b>
            <span class="label label-danger">10</span>
          </a>
          <ul class="dropdown-menu">
            <li class="dropdown-header"></li>
            <li class="message-preview">
              <a href="#">
                <span class="avatar"><i class="fa fa-bell"></i></span>
                <span class="message">Message from facebook</span>
              </a>
            </li>
            <li class="divider"></li>
            <li class="message-preview">
              <a href="#">
                <span class="avatar"><i class="fa fa-bell"></i></span>
                <span class="message">Message from twitter</span>
              </a>
            </li>
            <li class="divider"></li>
            <li><a href="#">See all  Messages</a></li>
          </ul>

Answer 1

我会解决您的问题并（重新）构建您的应用程序：

构建通知服务，您可以在其中添加（读取、删除..）通知。这是唯一可以使用推送器创建通知的类。通知服务跟踪（计数）通知。您也可以/应该使用 RxJS 使您的服务可订阅。

您的通知选项卡订阅了您的通知服务，因此会在有更改时收到通知，例如添加通知或删除通知。

这种方法的好处是：

• 你有一个通知服务，可以很容易地注入到组件中，让他们能够创建新的通知
• 只需实现一次推送器的使用，即可轻松替换或扩展通知的可视化效果
• 无论您在何处创建通知，您的通知计数和标签都会保持最新状态。

这种方法意味着相当多的工作，但会在您的应用增长时得到回报。