为什么我的“Angular Material Components”不起作用？答案

【问题标题】：Why my "Angular Material Components" Not Working?为什么我的“Angular Material Components”不起作用？
【发布时间】：2018-09-21 19:13:06
【问题描述】：

我是 Angular 6 和 Angular Material 的新手，我尝试创建一个示例来使用 ASP.NET CORE 1.1 应用程序检查 index.html 中的 Angular Material，但它无法正常工作。我的代码如下。

索引 HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 6</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
      <my-app><h1>bacem</h1></my-app>

      <button mat-raised-button color="warn">Warn</button>
      <br />
      <div class="mat-app-background">
          <mat-slider></mat-slider>
      </div>

  </body>
</html>

应用组件 ts：

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

@Component({
  selector: 'my-app',
    templateUrl: './index.html',
    styleUrls: ['./styles.scss']
})
export class AppComponent  { name = 'Angular'; }

应用模块.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngMaterialModule } from './angmaterial';



@NgModule({
    imports: [BrowserModule ,BrowserAnimationsModule,
        AngMaterialModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]

})
export class AppModule { }

angmaterial .ts

import { MatButtonModule, MatSliderModule } from '@angular/material';
import { NgModule } from '@angular/core';

@NgModule({
    imports: [MatButtonModule, MatSliderModule],
    exports: [MatButtonModule, MatSliderModule]
})

export class AngMaterialModule { }

结果：

enter image description here

【问题讨论】：

嗨，您是否正确安装了像 material.angular.io/guide/getting-started 这样的 Angular 材料，所以您能否使用 stackblitz.com 提供您的代码
@core114 yesi 正确安装了 Angular 材料，但我如何使用 stackblitz 提供我的代码？
@core114 我在 angmaterial .ts 文件中这样做了，但仍然是同样的问题！

标签： angular angular-material angular6

【解决方案1】：

应用模块 .ts 应该是导入你的MatButtonModule, MatSliderModule

    import { MatButtonModule, MatSliderModule } from '@angular/material';

    import { NgModule } from '@angular/core';

     @NgModule({
       imports: [
        BrowserModule ,
        BrowserAnimationsModule,
        AngMaterialModule,
        MatButtonModule, 
        MatSliderModule],


    declarations: [AppComponent],

    bootstrap: [AppComponent]

})
export class AppModule { }

和删除你的

angmaterial .ts 给你包括

MatButtonModule, MatSliderModule

你需要生成新组件(ng g c yourcomponenetname)

并把你的html代码使用组件删除 index.html

中的代码部分

index.html

当有人访问您的网站时提供的主要 HTML 页面。最多的时间你永远不需要编辑它。 CLI 会自动添加构建应用程序时的所有 js 和 css 文件，因此您无需添加任何或手动标记。

src 文件夹

src

应用

app.component.css

app.component.html

app.component.spec.ts

app.component.ts

app.module.ts

资产

.gitkeep

环境

环境.prod.ts

环境.ts

浏览器列表

favicon.ico

index.html

karma.conf.js

main.ts

polyfills.ts

styles.css

test.ts

tsconfig.app.json

tsconfig.spec.json

tslint.json

您的应用位于 src 文件夹中。所有 Angular 组件、模板、样式、图像和您的应用所需的任何其他内容都在这里。任何文件此文件夹之外的内容旨在支持构建您的应用程序。

你需要学习 Anuar 6 QuickStart with Angualar-6

【讨论】：

我不明白你请解释一下我添加了 import { .., .. } from '@angular/material';在我的（App Module .ts）中，这是同样的问题！
@mecab1995 我知道你的问题，你没有生成任何组件尝试理解这个，阅读这个angular.io/guide/quickstart
@mecab1995 按照你可以轻松做到的结构，链接在这里angular.io/guide/quickstart
我无法生成新组件的问题
运行你的终端试试这样ng g component yourcomponentname看看cli cli.angular.io