ng generate @angular/material:material-nav --name=main-nav 正确生成文件但它们不运行

Posted 2023-02-18

【中文标题】ng generate @angular/material:material-nav --name=main-nav 正确生成文件但它们不运行

【英文标题】：ng generate @angular/material:material-nav --name=main-nav generates files correctly but they do not run

【发布时间】：2018-12-16 14:19:36

【问题描述】：

我运行了一个简单的命令，该命令应该生成可以用作导航栏的预构建文件。它可以正确下载，但如果我将 <main-nav></main-nav> 添加到我的 app.component.html 页面，它只会输出一个空白页面。我的控制台中没有错误。以下是命令：ng generate @angular/material:material-nav --name=main-nav 我正在使用 Mac、Angular 6 和 Angular Material。以下是我关注的视频：https://www.youtube.com/watch?v=Q6qhzG7mObU。我已经独立测试了每个部分，发现<mat-sidenav></mat-sidenav> 函数根本不起作用。

【参考方案1】：

我遇到了类似的问题，我的问题是通过导航到运行 ng generate @angular/material:material-nav --name=main-nav 后创建的 main-nav 文件夹解决的

注意：文件夹名称可以是您指定的任何名称 --name=?

导航到main-nav.component.ts 找到@components 装饰器并在其中找到选择器属性。在需要的地方使用该选择器作为标签，在这种情况下，您应该替换 app.component.html 页面中的标签。

例如，我的 @components 装饰器如下所示：

@Component(
  selector: 'app-app-nav',
  templateUrl: './app-nav.component.html',
  styleUrls: ['./app-nav.component.scss']
)

所以我的 app.component.html 页面中的内容将是 <main-nav></main-nav>。

我希望这对某人有所帮助。

【参考方案2】：

您是否将MatSidenavModule 添加到您应用的模块中？

@NgModule(
  imports: [
    MatSidenavModule,
    // ...
  ]
)
export class AppModule