角材料对话框按钮

时间:2021-04-12 10:05:18

标签: angular angular-material

我根据material documentation example实现了对话框:

<h1 mat-dialog-title>{{status}}</h1>
<div mat-dialog-content>
  <p>{{content}}</p>
</div>
<div mat-dialog-actions>
    <button mat-button mat-dialog-close>Close</button>
  </div>

enter image description here

但是按钮不起作用,它没有其他元素的样式。

有人知道可能是什么原因吗?


这是material.module.ts文件的内容:

import { NgModule } from '@angular/core'
import { MatButtonModule } from '@angular/material/button'
import { MatFormFieldModule } from '@angular/material/form-field'
import { MatInputModule } from '@angular/material/input';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import {MatListModule} from '@angular/material/list';
import {MatTableModule} from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import {MatTabsModule } from '@angular/material/tabs';
import {MatDialogModule} from '@angular/material/dialog';
import {MatGridListModule} from '@angular/material/grid-list';
import {MatCardModule} from '@angular/material/card';
import {MatSelectModule} from '@angular/material/select';
import { MatSortModule } from '@angular/material/sort';

@NgModule({
    imports: [MatButtonModule, MatFormFieldModule, MatInputModule, MatSidenavModule, MatToolbarModule, MatIconModule, MatListModule, MatTableModule, MatPaginatorModule, MatTabsModule, MatDialogModule, MatGridListModule, MatCardModule, MatSelectModule, MatSortModule],
    exports: [MatButtonModule, MatFormFieldModule, MatInputModule, MatSidenavModule, MatToolbarModule, MatIconModule, MatListModule, MatTableModule, MatPaginatorModule, MatTabsModule, MatDialogModule, MatGridListModule, MatCardModule, MatSelectModule, MatSortModule]
})

这是 app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    RecentAnnouncementsComponent,
    CommunityAnalyticsComponent,
    SubscribeComponent,
    UnsubscribeComponent,
    NavigationComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})

0 个答案:

没有答案