Javascript 在导航栏的选项卡中添加红点

当有新消息时，我需要在消息选项卡中添加一个带有数字的红点

这是我的HTML

<ul class="nav pw-nav pw-nav--horizontal">
    <li class="nav-item">
      <a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/dashboard/home']">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/dashboard/documents']">My Applications</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/dashboard/registry']">Registered entities</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/conversation']">Communication</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/dashboard/external-services']">External Services</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/dashboard/contact-us']">Contact us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/dashboard/user-manuals']">User Manuals</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled">Post-Registration</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled">How to</a>
    </li>
    <!--<li class="nav-item">-->
      <!--<a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/dashboard/post-registration']">Post-Registration</a>-->
    <!--</li>-->
    <!--<li class="nav-item">-->
      <!--<a class="nav-link" [routerLinkActive]="['active']" [routerLink]="['/company/dashboard/how-to']">How to</a>-->
    <!--</li>-->
  </ul>

我只是在一家公司实习，以前从未面对过JS，Angular 6。 我在google中发现，我需要导入badge.module，然后在HTML中添加它。 但是，我不确定在何处查找用于导入徽章模块的文件。

如果查看，您可以看到材质徽章的工作示例

在这个项目中，他们已经导入了所有的模块，并为了演示的目的重新导出了它们。然后，可以将此模块添加到app.module.ts的导入中，并可在全球范围内用于您的应用程序

如果您仅将材质用于徽章，则只需从“@angular/Material/badge”导入{MatBadgeModule}安装必要的节点模块后。

如果查看，您可以看到材质徽章的工作示例

在这个项目中，他们已经导入了所有的模块，并为了演示的目的重新导出了它们。然后，可以将此模块添加到app.module.ts的导入中，并可在全球范围内用于您的应用程序

---

如果您仅将材质用于徽章，则只需从“@angular/Material/badge”导入{MatBadgeModule}安装必要的节点模块后。

如果您是实习生，请向主管寻求帮助。永远不要害怕寻求帮助。把一个新实习生放到一项任务上，然后说“加油”似乎是不合理的。。。没有帮助或指导，对我和他们都没有问题。然而，我想先尝试一下，如果没有帮助，我会寻求帮助。如果你是实习生，请向你的主管寻求帮助。永远不要害怕寻求帮助。把一个新实习生放到一项任务上，然后说“加油”似乎是不合理的。。。没有帮助或指导，对我和他们都没有问题。但是，我想先试试，如果没有帮助，我会寻求帮助Hello@Aditya谢谢你的回复。所以，我的团队领导说他们已经有了红点，正如我在代码中看到的，他们有显示新消息数量的东西，但是它在页面中，而我需要将它添加到标题中<代码>通信

常量numberofunreadmessagetimer=TimerObservable.create（0，60000）；this.checkUnderMessageTimerSubscription=numberOfUnderMessageTimer.subscribe（计时器=>{this.getNumberOfUnderMessages（）；}）你好@Aditya谢谢你的回复。所以，我的团队领导说他们已经有了红点，正如我在代码中看到的，他们有显示新消息数量的东西，但是它在页面中，而我需要将它添加到标题中<代码>通信

常量numberofunreadmessagetimer=TimerObservable.create（0，60000）；this.checkUnderMessageTimerSubscription=numberOfUnderMessageTimer.subscribe（计时器=>{this.getNumberOfUnderMessages（）；}）
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {DashboardComponent} from './dashboard.component';
import {HomeComponent} from './home/home.component';
import {DocumentsComponent} from './documents/documents.component';
import {RegistryComponent} from './registry/registry.component';
import {ExternalServicesComponent} from './external-services/external-services.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import {HowToComponent} from './how-to/how-to.component';
import {PostRegComponent} from './post-registration/post-reg.component';
import {UserManualsComponent} from './user-mannuals/user-manuals.component';

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    children: [
      { path: '', redirectTo: 'documents' },
      { path: 'home', component: HomeComponent },
      { path: 'documents', component: DocumentsComponent },
      { path: 'registry', component: RegistryComponent },
      { path: 'external-services', component: ExternalServicesComponent },
      { path: 'contact-us', component: ContactUsComponent },
      { path: 'user-manuals', component: UserManualsComponent },
      { path: 'post-registration', component: PostRegComponent },
      { path: 'how-to', component: HowToComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class DashboardRoutingModule {}