无法使用<mat-tab-group>
我安装了最新的nodejs,angular cli和angular材质 但是当我在浏览器中运行项目时,我无法获得标签
@angular/cli: 1.4.5
node: 8.7.0
os: linux x64
@angular/animations: 4.4.5
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.5
@angular/compiler: 4.4.5
@angular/core: 4.4.5
@angular/forms: 4.4.5
@angular/http: 4.4.5
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.5
@angular/platform-browser-dynamic: 4.4.5
@angular/router: 4.4.5
@angular/cli: 1.4.5
@angular/compiler-cli: 4.4.5
@angular/language-service: 4.4.5
typescript: 2.3.4
注册组件Html
<app-header>
</app-header>
<div class="mainwrap">
<div class="heading">
Registration
</div>
<mat-tab-group>
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>
</div>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { RegistrationComponent } from './registration/registration.component';
import {MatTabsModule} from '@angular/material';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
RegistrationComponent
],
imports: [
BrowserModule,
MatTabsModule,
RouterModule.forRoot(
[
{
path: '',
redirectTo: 'registration',
pathMatch: 'full'
},
{
path: 'registration',
component: RegistrationComponent
}
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
答案 0 :(得分:7)
经过一些研究后我找到了答案
我没有在app.module.ts中导入BrowserAniminationModule,因为我无法正确使用这些标签。
答案 1 :(得分:1)
我有一个仅与mat-tabs类似的问题,看来这是另一个引起麻烦的错误。 解决了其他问题之后(在浏览器控制台中),选项卡终于出现了!
答案 2 :(得分:0)
包含主题
https://material.angular.io/guide/getting-started#step-4-include-a-theme
必须包含主题才能将所有核心和主题样式应用于您的应用程序。
要开始使用预制主题,请在您的应用程序中全局包含Angular Material的预制主题之一。如果您使用的是Angular CLI,则可以将其添加到styles.css:
@import“ ~@angular/material/prebuilt-themes/indigo-pink.css”;
如果您不使用Angular CLI,则可以通过index.html中的元素包括预建主题。