Angular Material 2'mat-button'显示为常规按钮

时间:2017-11-26 14:16:56

标签: angular typescript angular-material2

我的app.component.ts:

import { Component } from '@angular/core';
import {MatButtonModule} from '@angular/material/button';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'tour of heroes';
}
app.component.html中的

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
    <button mat-raised-button>Basic</button>
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<ul>
  <li>
    <h2>
      <a routerLink="/history" routerLinkActive="history">Heroes</a>
    </h2>
  </li>

  <li>
    <h2>
      <a routerLink="/submission-display" routerLinkActive="submission-display">Submissions</a>
    </h2>
  </li>
</ul>

<router-outlet></router-outlet>

当我跑步时,我得到没有主题的标准浏览器按钮。

1 个答案:

答案 0 :(得分:2)

您需要在app.moudle.ts文件中注册MatButtonModule

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

@NgModule({
  imports: [MatButtonModule]
})