Question

我是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

Answer 1

应用模块.ts 应该是您的function ME() {} if ($I_Said === ME($val))

的导入

MatButtonModule, MatSliderModule

和删除

主要材料.ts 要包含的内容

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 { }

您需要生成新组件MatButtonModule, MatSliderModule

并放置您的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

环境

environment.prod.ts

environment.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

为什么我的“角材料组件”不起作用？

1 个答案: