Angular Material 选项卡根本不渲染答案

【问题标题】：Angular Material tabs are not rendered at allAngular Material 选项卡根本不渲染
【发布时间】：2019-05-29 07:23:32
【问题描述】：

我正在尝试使用 Angular 材质选项卡模块，但它没有正确呈现。而不是选项卡，只显示文本。

我正在使用 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">

我希望显示选项卡，但只显示文本：

很明显我忘记了什么。任何指针将不胜感激。

【问题讨论】：

您的网络服务器可以从 node_modules 中提供任何服务。按照入门指南所说的去做：material.angular.io/guide/….
事实上我也尝试过。但是，我不确定我需要将它添加到哪个文件。我没有styles.css 文件，而是global.scss 文件，所以我在那里添加了它-> 没有成功。
您没有使用标准的 CLI 项目结构，因此我们无法知道您是如何配置项目的。如果您想在 index.html 中使用指向 css 文件的链接，则将其复制到 assets 目录（假设您的项目确实有 assets 目录，因为它似乎没有使用标准 CLI 布局），然后使用该文件的路径而不是 node_modules 的路径。
这是一个使用 jHipster 生成的项目，所以我假设设置应该遵循一些标准布局。无论如何，可以肯定地说它最有可能与 shylesheet 链接有关吗？

标签： angular angular-material

【解决方案1】：

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

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

declarations: [
   ...,
   MyTestComponent
]

【讨论】：