首页 文章

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

提问于
浏览 次
1

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

Index 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>
      

      <div class="mat-app-background">
          <mat-slider></mat-slider>
      </div>

  </body>
</html>

App Component ts:

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

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

App Module .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 { }

Result ：

enter image description here

enter image description here

angular angular-material angular6

1 回答

  • 0

    App Module .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 to you include

    MatButtonModule, MatSliderModule

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

    并将你的html代码使用组件删除你的代码部分 index.html

    index.html

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

    The src folder

    src app app.component.css app.component.html app.component.spec.ts app.component.ts app.module.ts

    assets

    .gitkeep environment environment.prod.ts environment.ts browserslist favicon.ico index.html karma.conf.js main.ts polyfills.ts styles.css test.ts tsconfig.app.json tsconfig.spec.json tslint.json Your应用程序位于src文件夹中 . 所有Angular组件，模板，样式，图像以及您的应用所需的任何其他内容都可以在此处找到 . 此文件夹之外的任何文件都旨在支持构建您的应用程序 .

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

    回复于

相关问题