Ich versuche einen Tooltip mit Angular 2 Material in einem Angular-CLI Projekt zu implementieren. Die Dokumentation ist ein wenig unklar, was genau benötigt wird. Alles, was ich brauche, ist ein Standard-Tooltip-Popup, das angezeigt wird.Verwendung von mdTooltip im Angular-CLI Projekt
In meiner Komponente HTML Ich habe diese:
<button md-raised-button mdTooltip="This is a tooltip!" mdTooltipPosition="below">Button</button>
In meinem app.module Ich habe dies (der Kürze halber bearbeitet):
import { MaterialModule } from '@angular/material';
@NgModule({
imports: [
MaterialModule.forRoot(),
]
Ich habe auch Material und hammer.js aufgeführt in mein package.json (wie hammer.js ist anscheinend eine Abhängigkeit für den mdTooltip). Hier ist mein 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"
}
}
Ich bin unklar, was ich brauche, um auch die component.ts-Datei zu importieren in und was sonst, wenn überhaupt, dann benötigt wird, um diese Funktion zu erhalten. Hier ist, was ich für die Komponentendatei jetzt habe:
Momentan sehe ich eine Schaltfläche in meiner Komponentenansicht. Es wird jedoch kein Tooltip angezeigt, wenn ich den Mauszeiger über den Button halte. Es zeigt die anderen Material-Design-Elemente (hervorgehobenes Button-Styling, etc.), aber keine Tooltip.
sieht Meine polyfills.ts-Datei wie folgt:
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';
Ihre 'polyfills.ts'-Datei? –
Fügen Sie es einfach oben hinzu. – Muirik
Versuchen Sie, 'import 'hammerjs/hammer' hinzuzufügen;' –