时间戳

首页 > 解决方案 > 角度材质工具栏不继承自角度材质

angular - 角度材质工具栏不继承自角度材质

问题描述

我想在我的应用程序左侧集成一个导航栏。但是css中的继承似乎不起作用。

导航工具栏应该像视频中一样继承角度材料“IF”的样式，我做对了。现在基本上没有继承任何东西。我在控制台中没有错误，我确定，我已经导入了机器人等。

由于我是该领域的新手，因此我使用 youtube 视频进行指导： https ://www.youtube.com/watch?v= Q6qhzG7mObU 我更新了我的 npm 和 ng。此外，我使用 'ng add @angular/material' 来确保正确配置和导入所有内容。

app.module.ts：

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MainNavComponent } from './main-nav/main-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    MainNavComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

样式.css：

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

这是材质工具栏 main-nav-component.ts 的自动生成模板：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="!(isHandset$ | async)">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>XML-ConfiguratorV2</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

这里是有问题的css：

.sidenav .mat-toolbar {
  background: inherit;
}

现在我实际得到的结果是这样的： 实际的 预期的

感谢您的帮助：D

标签： angularnpmangular-material

解决方案

您只需要添加of color="primary"。因此，在您的代码中：mat-toolbarmat-sidenav

...
<mat-sidenav-container ...>
    <mat-sidenav ...>
        <mat-toolbar color="primary">Menu</mat-toolbar> // Note : color="primary" at this line
    </mat-sidenav>
</mat-sidenav-container>
...

推荐阅读