角侧栏添加工具提示不起作用

核心114

我将我的angular 7项目侧栏添加到了工具提示中,但是任何人都不知道如何正确添加它

谢谢

sidebar.component.html

<ul class="nav">
        <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
            <a class="nav-link" [routerLink]="[menuItem.path]">
           <!--     <i class="material-icons">{{menuItem.icon}}</i>-->
                <p><span><img  src="{{menuItem.image}}" width="17" height="17" style="opacity: 0.5;"></span>&nbsp;{{menuItem.tooltip}}</p>
            </a>
        </li>
</ul>

sidebar.component.ts

    import {Component, OnInit} from '@angular/core';
    import {Router, RouterModule, Routes} from '@angular/router';

    declare const $: any;

    declare interface RouteInfo {
        path: string;
        tooltip: string;
        //icon: string;
        class: string;
        image: string;

       /* isSelected: boolean,
        children: any*/
    }


    export const ROUTES: RouteInfo[] = [
        /*{ path: '/dashboard', tooltip: 'Dashboard',  icon: 'home', class: '' },*/
        {
            path: '/projects', tooltip: 'Projects', image: '/assets/img/Projects.svg', class: '',
        },



                {path: '/applications', tooltip: 'Class',  class: '', image: '/assets/img/img1.svg',},
                {path: '/monitoring', tooltip 'Student',  class: '', image: '/assets/img/img2.svg',},
                {path: '/store', tooltip: 'teacher',  class: '', image: '/assets/img/img3.svg',},







        {path: '/profile', title: 'Profile',  class: '', image: '/assets/img/profile.svg',},
            {path: '/billing', title: 'Billing', class: '',image: '/assets/img/Billing.svg',},



];

应用模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatTooltipModule} from '@angular/material/tooltip';

@NgModule({
  declarations: [
    AppComponent,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatTooltipModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
沙申克·维维克

工具提示集成演示

可以添加如下:

<button mat-raised-button
        matTooltip="Info about the action"
        matTooltipClass="example-tooltip-red1"
        aria-label="Button that displays a tooltip when focused or hovered over">
  Action
</button>

在您的代码中,您需要添加

import { MatTooltipModule} from '@angular/material';

并做:

@NgModule({
  imports: [
    BrowserModule,
   AppRoutingModule,
   BrowserAnimationsModule,
    MatTooltipModule
  ],

并在html下面添加属性

 matTooltip="{{menuItem.tooltip}}"

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章