垫标签样式似乎未正确导入

Question

我正在尝试将mat-tab正确添加到我的项目中， 但好像垫子标签未正确导入或类似的东西。因为似乎未导入mat-tab的完整样式

TS代码块

import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-code-block',
  templateUrl: './code-block.component.html',
  styleUrls: ['./code-block.component.scss']
})

export class CodeBlockComponent {
  @Input() htmlContent: any;
  @Input() scssContent: any;
  @Input() typescriptContent: any;

  constructor() {
  }

}

HTML代码块

<mat-tab-group>
  <mat-tab label="HTML">Content 1</mat-tab>
  <mat-tab label="SCSS">Content 2</mat-tab>
  <mat-tab label="Typescript">Content 3</mat-tab>
</mat-tab-group>

app.module.ts（不包括在c之上的导入）

@NgModule({
  declarations: [
    AppComponent,
    CodeBlockComponent
  ],
  imports: [
    AppRoutingModule,
    AppMaterialModule,
    BrowserModule,
    FlexLayoutModule,
    BrowserAnimationsModule,
    FormsModule,
  ],
  entryComponents: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

结果：

代替：

Answer 1

尝试在您的app.module.ts中导入MatTabsModule

从'@ angular / material / tabs'导入{MatTabsModule};

并增加进口：

进口：[  MatTabs模块 ]

在这里检查：https://stackblitz.com/angular/amaplrmgqnp?file=app%2Ftab-group-basic-example.ts