0
我正在使用angular2-mdl並將工具提示應用於標題項目。
但工具提示看起來模糊。angular2-mdl工具提示出現混淆
什麼也沒有故意添加這樣的事情發生。
見的index.html：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>App Title</title>
<base href="/">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Page styles -->
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-red.min.css" />
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root>Loading...</app-root>
<!-- IE Compatibility shims -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js""></script>
<![endif]-->
<!--[if IE]>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flexie/1.0.3/flexie.min.js"></script>
<link href="./assets/ie.css" rel="stylesheet">
<![endif]-->
<!-- end shims -->
</body>
</html>
和APP的另一part's：
styles.css的：
/* You can add global styles to this file, and also import other style files */
mdl-layout mdl-layout-header nav button.mdl-button--icon {
margin-left: 10px;
margin-right: 10px;
}
的app.module.ts：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MdlModule } from '@angular-mdl/core';
import { routing } from './app.routing';
import { AppComponent } from './app.component';
import { MainComponent } from './layout/main/main.component';
@NgModule({
declarations: [
AppComponent,
MainComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MdlModule,
routing
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.routing.ts：
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainComponent } from "app/layout/main/main.component";
const APP_ROUTES: Routes = [
{ path: '', component: MainComponent },
];
export const routing: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);
和main.component.ts：
<mdl-layout mdl-layout-fixed-header mdl-layout-fixed-drawer>
<mdl-layout-header>
<mdl-layout-header-row>
<mdl-layout-title>App Title</mdl-layout-title>
<mdl-layout-spacer></mdl-layout-spacer>
<nav class="mdl-navigation">
<button mdl-button mdl-button-type="icon" mdl-tooltip-large="Notificações"><mdl-icon>notifications</mdl-icon></button>
<button mdl-button mdl-button-type="icon" mdl-tooltip-large="Usuário"><mdl-icon>account_circle</mdl-icon></button>
<button mdl-button #btnSettings="mdlButton" (click)="menuSettings.toggle($event, btnSettings)" mdl-button-type="icon" mdl-ripple mdl-tooltip-large="Opções"><mdl-icon>more_vert</mdl-icon></button>
<mdl-menu #menuSettings="mdlMenu" mdl-menu-position="bottom-left">
<mdl-menu-item>Some Action</mdl-menu-item>
<mdl-menu-item mdl-menu-item-full-bleed-divider>Another Action</mdl-menu-item>
<mdl-menu-item disabled>Disabled Action</mdl-menu-item>
<mdl-menu-item>Yet Another Action</mdl-menu-item>
</mdl-menu>
<button mdl-button mdl-button-type="icon" mdl-tooltip-large="Logout"><mdl-icon>power_settings_new</mdl-icon></button>
</nav>
</mdl-layout-header-row>
</mdl-layout-header>
<mdl-layout-drawer>
<mdl-layout-title>App Title</mdl-layout-title>
<nav class="mdl-navigation">
<a class="mdl-navigation__link">Link</a>
<a class="mdl-navigation__link">Link</a>
<a class="mdl-navigation__link">Link</a>
</nav>
</mdl-layout-drawer>
<mdl-layout-content>
<!-- Your content goes here -->
</mdl-layout-content>
</mdl-layout>
的app.component.ts僅具有route-outlet。
什麼被渲染，第1部分：
第2部分：
有什麼不對？