[英]Using mdTooltip in Angular-CLI Project
I am trying to implement a tooltip using Angular 2's material in an Angular-CLI project. 我正在尝试在Angular-CLI项目中使用Angular 2的材料来实现工具提示。 The documentation is a little unclear on exactly what's needed. 该文档尚不清楚确切需要什么。 All I need is a standard tooltip popup to show up. 我只需要显示一个标准的工具提示弹出窗口即可。
In my component HTML I have this: 在我的组件HTML中,我有以下内容:
<button md-raised-button mdTooltip="This is a tooltip!" mdTooltipPosition="below">Button</button>
In my app.module I have this (edited for brevity): 在我的app.module中,我有这个(为简洁起见进行了编辑):
import { MaterialModule } from '@angular/material';
@NgModule({
imports: [
MaterialModule.forRoot(),
]
I also have material and hammer.js listed in my package.json (as hammer.js is apparently a dependency for the mdTooltip). 我的package.json中也列出了material和Hammer.js(因为Hammer.js显然是mdTooltip的依赖项)。 Here's my package.json: 这是我的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"
}
}
I'm unclear on what I need to also import into the component.ts file and what else, if anything, is needed to get this working. 我不清楚我还需要将什么导入到component.ts文件中,以及还需要什么才能使它正常工作。 Here's what I have for the component file now: 这是我现在拥有的组件文件:
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() {
}
}
Right now I see a button in my component view. 现在,我在组件视图中看到一个按钮。 But no tooltip shows up when I hover over or click on the button. 但是当我将鼠标悬停或单击按钮时,没有工具提示出现。 It shows the other material design elements (raised button styling, etc), but no tooltip. 它显示了其他材料设计元素(凸起的按钮样式等),但没有工具提示。
My polyfills.ts file looks like this: 我的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';
使用md-tooltip
代替mdTooltip
:
<button md-raised-button md-tooltip="This is a tooltip!" mdTooltipPosition="below">Button</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.