angular和ionic_使用ionic 4和angular添加徽章通知

angular和ionic

So you have an app that you’ve been working on for a while, and you can picture the perfect item to add next. A way for people who use your app to know when they have something that needs their attention.

因此，您有一个已经使用了一段时间的应用程序，您可以想象下要添加的完美项目。 使用您的应用的人可以知道何时有需要关注的内容。

Recently, I’ve had the same thought and found a few issues with implementing it in an Ionic application successfully. So here i’ll go through adding it and possible issues you might have with making it build and successfully run.

最近，我有同样的想法，并发现了在Ionic应用程序中成功实现它的一些问题。 因此，在这里我将逐步添加它，以及使其构建并成功运行时可能遇到的问题。

入门 (Getting Started)

The only items you will need to get started is your project you wish to add Badge Notifications to, (obviously) a working computer, and internet connection.

您需要开始的唯一项目是您希望向(正常情况下)正在运行的计算机和Internet连接中添加“徽章通知”的项目。

添加代码 (Adding the code)

The last time I checked the Ionic documentation had three different pages all talking about different ways to implement Badge Notifications. In these pages, there was only one that worked for our specific goal in mind, the second was speaking about adding Badge Notification Icons to your project (on tabs or columns) and the last was an outdated version of what we were trying to do that only worked on Ionic 3.

我上次查看Ionic文档时有三个不同的页面，每个页面都在讨论实现徽章通知的不同方法。 在这些页面中，只有一个针对我们的特定目标而工作，第二个是关于在项目中(在选项卡或列上)添加“ 徽章通知”图标 ，最后一个是我们试图做到的过时版本。仅适用于Ionic 3。

If you’re using Cordova:

如果您使用的是Cordova：

ionic cordova plugin add cordova-plugin-badgenpm 
install @ionic-native/badge

If you’re using Capacitor:

如果您使用电容器：

npm install cordova-plugin-badgenpm 
install @ionic-native/badge
ionic cap sync

Next, we will be adding the code required to actually make it work in your project.

接下来，我们将添加使其真正在您的项目中运行所需的代码。

Starting out, open the page you would like to add the Badge Notification to. Once you have opened the file you would like to use it on, add the following to the import section of your file.

首先，打开您要添加徽章通知的页面。 打开文件后，要在其上使用它，请将以下内容添加到文件的导入部分。

import { Badge } from '@ionic-native/badge/ngx';

In the Constructor, add private badge: Badge to the list.

在构造函数中，将private badge: Badge添加到列表中。

There are four main functions used for Badge manipulation. The first being this.badge.set() which takes in one argument of type integer to set the badge count to. For example:

徽章操作有四个主要功能。 第一个是this.badge.set() ，它接受一个整数类型的参数来设置徽章计数。 例如：

public notifyUser() {
   if(thisUser.notifications.value >== 0){
      this.badge.set(this.notifications.value);
   }}

The next function used for Badge manipulation is this.badge.increase() which takes in one argument of type integer to add to the current badge count.

徽章操作的下一个函数是this.badge.increase() ，它接受一个整数类型的参数添加到当前徽章计数中。

public updateBadge() {
   if(SOMETHING_HAS_CHANGED) {
      this.badge.increase(NUMBER_TO_ADD_TO_CURRENT);
   }}

There is another function that does the opposite of the previous function we spoke about and that is this.badge.decrease() which also takes in one argument of type integer. However, instead of incrementing the current badge count, it decrements. For example, if you would like to keep track of if a user has view some notifications but not all, you can simply:

还有另一个函数与我们前面提到的函数相反，它是this.badge.decrease() ，它也接受一个整数类型的参数。 但是，它会减少而不是增加当前徽章计数。 例如，如果您想跟踪用户是否查看了一些通知而不是全部通知，则可以简单地执行以下操作：

public updateBadge(countToDecrement) {
      this.badge.decrease(countToDecrement);
}

The last and final main function that the Badge class gives us is this.badge.clear(); which clears the current badge count and removes it from displaying on the app icon. An example of how this would work is:

Badge类提供给我们的最后一个也是最后一个主要函数是this.badge.clear(); 该操作会清除当前的徽章计数，并将其从应用程序图标上删除。 一个如何工作的示例是：

public updateBadge(currentBadgeCount) {
   if(currentBadgeCount === 0) {
      this.badge.clear();
   }}

我面临的问题及其解决方案 (Issues I’ve Faced and Their Solutions)

While adding this to my very own project, I came into some issues. Whether they were from me just not knowing the common practices of adding a new feature to an Ionic App, or if it was truly an issue. Either way, I have added them below to make sure y’all don’t have to go through them and spend hours traversing the internet in search for fixes.

在将其添加到我自己的项目中时，我遇到了一些问题。 他们是否来自我，只是不知道向Ionic App添加新功能的常见做法，还是确实存在问题。 无论哪种方式，我都在下面添加了它们，以确保大家都不必经过它们，而是花费数小时遍历Internet来搜索修复程序。

ERROR Error: StaticInjectorError(AppModule)[Badge]: 
  StaticInjectorError(Platform: core)[Badge]: 
    NullInjectorError: No provider for Badge!

This error will show in the Console Window after you run ionic serve and nothing displays on the page that loads. To fix this issue, go into your app.module.ts file and in the ‘Providers’ section, and add Badge into the list. The final thing to do to fix this issue is add the following line at the top where the import list is:

运行ionic serve后，该错误将显示在控制台窗口中，并且加载的页面上没有任何显示。 要解决此问题，请进入app.module.ts文件，在“提供者”部分，然后将“ Badge ”添加到列表中。 解决此问题的最后一件事是在导入列表所在的顶部添加以下行：

import { Badge } from '@ionic-native/badge/ngx';

Once you add those two things, re-build and run your project and it should fix your issue.

一旦添加了这两件事，就可以重新构建并运行项目，它应该可以解决您的问题。

If you would like to view my previously written articles or connect with me, visit my website by clicking here!

如果您想查看我以前写的文章或与我联系，请单击此处访问我的网站！

翻译自: https://medium.com/swlh/adding-badge-notifications-with-ionic-4-and-angular-f42c4be2ff9b

angular和ionic