在Angular-CLI项目中使用mdTooltip

我正在尝试在Angular-CLI项目中使用Angular 2的材质实现工具提示。这些文档有些不清楚究竟需要什么。我需要的只是一个标准的工具提示弹出窗口。在Angular-CLI项目中使用mdTooltip

在我的组件HTML我有这样的：

<button md-raised-button mdTooltip="This is a tooltip!" mdTooltipPosition="below">Button</button>

以我app.module我有这个（编辑为简洁起见）：

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

@NgModule({ 
    imports: [ 
     MaterialModule.forRoot(), 
    ]

我也有材料和hammer.js中列出我的package.json（因为hammer.js显然是mdTooltip的依赖）。这里是我的package.json：

{ 
    "name": "abc", 
    "version": "0.0.1", 
    "license": "MIT", 
    "angular-cli": {}, 
    "scripts": { 
    "start": "ng serve", 
    "lint": "tslint \"src/**/*.ts\"", 
    "test": "ng test", 
    "pree2e": "webdriver-manager update", 
    "e2e": "protractor" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/common": "2.2.3", 
    "@angular/compiler": "2.2.3", 
    "@angular/core": "2.2.3", 
    "@angular/forms": "2.2.3", 
    "@angular/http": "2.2.3", 
    "@angular/material": "^2.0.0-beta.1", 
    "@angular/platform-browser": "2.2.3", 
    "@angular/platform-browser-dynamic": "2.2.3", 
    "@angular/router": "3.2.3", 
    "@types/socket.io": "^1.4.27", 
    "@types/socket.io-client": "^1.4.29", 
    "angular-in-memory-web-api": "~0.1.15", 
    "angular2-chartjs": "^0.1.6", 
    "chart.js": "^2.4.0", 
    "core-js": "^2.4.1", 
    "hammerjs": "^2.0.8", 
    "ng2-charts": "^1.4.1", 
    "rxjs": "5.0.0-beta.12", 
    "socket.io": "^1.7.2", 
    "socket.io-client": "^1.7.2", 
    "ts-helpers": "^1.1.1", 
    "zone.js": "^0.6.23" 
    }, 
    "devDependencies": { 
    "@angular/compiler-cli": "2.2.3", 
    "@types/hammerjs": "^2.0.34", 
    "@types/jasmine": "2.5.38", 
    "@types/node": "^6.0.42", 
    "angular-cli": "1.0.0-beta.22-1", 
    "codelyzer": "~2.0.0-beta.1", 
    "jasmine-core": "2.5.2", 
    "jasmine-spec-reporter": "2.5.0", 
    "karma": "1.2.0", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-remap-istanbul": "^0.2.1", 
    "protractor": "4.0.9", 
    "ts-node": "1.2.1", 
    "typescript": "~2.0.3", 
    "typings": "^1.3.2", 
    "webdriver-manager": "10.2.5" 
    } 
}

我什么我还需要导入component.ts文件，还有什么不清楚，如果有的话，是需要得到这个工作。这里是我现在的组件文件：

import { MaterialModule } from '@angular/material'; 
import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-room', 
    templateUrl: './room.component.html', 
    styleUrls: ['./room.component.less'] 
}) 
export class RoomComponent implements OnInit { 

    otherImg = 'app/img/avatar.svg'; 

    others = [ 
    { id: 1, name: 'John Smith' }, 
    { id: 2, name: 'Javier Sanchez' } 
    ]; 

    chat(other) { 
    console.log('Room chat function initiated...'); 
    } 

    constructor() { } 

    ngOnInit() { 
    } 

}

现在我在组件视图中看到一个按钮。但是当我悬停或点击按钮时，没有工具提示出现。它显示了其他材料设计元素（凸起的按钮样式等），但没有提示。

我polyfills.ts文件看起来像这样：

import 'core-js/es6/symbol'; 
import 'core-js/es6/object'; 
import 'core-js/es6/function'; 
import 'core-js/es6/parse-int'; 
import 'core-js/es6/parse-float'; 
import 'core-js/es6/number'; 
import 'core-js/es6/math'; 
import 'core-js/es6/string'; 
import 'core-js/es6/date'; 
import 'core-js/es6/array'; 
import 'core-js/es6/regexp'; 
import 'core-js/es6/map'; 
import 'core-js/es6/set'; 
import 'core-js/es6/reflect'; 

import 'core-js/es7/reflect'; 
import 'zone.js/dist/zone';

来源

2016-12-28 Muirik

你'polyfills.ts'文件？ –

刚刚在上面添加了它。 – Muirik

尝试添加'import'hammerjs/hammer';' –

使用md-tooltip而不是mdTooltip：

<button md-raised-button md-tooltip="This is a tooltip!" mdTooltipPosition="below">Button</button>

来源

2016-12-28 22:07:07

我曾尝试过。无论如何，仍然没有去。 – Muirik

在Angular-CLI项目中使用mdTooltip

回答

相关问题