Question

我正在尝试使用Angular Material Tabs模块，但是无法正确呈现。代替选项卡，仅显示文本。

我正在使用Angular 6，Angular Material版本为6.4.7

我遵循了https://v6.material.angular.io/guide/getting-started中所述的设置过程（npm安装，没有快照）

然后，我对常见的陷阱进行了一些研究。我检查了正确的导入，确保导入了样式表，并使用了BrowserAnimationsModule以及基本模块MatInputModule。实际上，Stackoverflow上的所有答案都无法帮助我解决问题。

这是我模板中各个部分的外观：

        <mat-tab-group>
            <mat-tab label="First"> Content 1 </mat-tab>
            <mat-tab label="Second"> Content 2 </mat-tab>
            <mat-tab label="Third"> Content 3 </mat-tab>
        </mat-tab-group>

正如其他一些答复指出缺少导入一样，我再次进行了检查。这是我在app.module.ts文件中的导入：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material';
import { MatTabsModule } from '@angular/material/tabs';

它们也在@NgModule中定义：

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatInputModule,
        MatTabsModule,

我还检查了导入的主题：这是我的index.html文件中的相应行：

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

我希望标签会显示，但只会显示“文本”：

显然，我忘记了一些东西。任何指针将不胜感激。

Answer 1

我遇到了完全相同的问题，当一个组件显示正确但另一个组件在同一模块中显示不正确时。

检查您是否没有在模块的声明部分下添加组件（例如：MyTestComponent），例如：

declarations: [
   ...,
   MyTestComponent
]

角材料选项卡根本不呈现

1 个答案: