如何在 Angular 六组件上编辑样式属性

Question

我是 Angular 开发新手。

我已经开始使用 Angular 6 Material (material.angular.io) 开发一个网站，并通过提供响应式工具栏和用于导航的侧导航组件的导航示意图开始了这个过程。默认的 HTML 布局如下所示：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav"
    ...
    <mat-toolbar color="primary">
     ...
    </mat-toolbar>

    <mat-nav-list>
        <a mat-list-item routerLink='/menu1'>menu 1</a>
        ...
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content >
    <mat-toolbar color="primary" >
        <mat-toolbar color="primary" class="mat-toolbar" >
          <mat-toolbar-row >  
            ...
          </mat-toolbar-row>
        </mat-toolbar> 
    </mat-toolbar>
    <!-- Application components go here-->
    <router-outlet></router-outlet> 
  </mat-sidenav-content>

</mat-sidenav-container>

mat-sidenav-container 包含 mat-sidenav-content 左侧的“抽屉”mat-sidenav

我想以编程方式缩小 mat-sidenav 的宽度，随后将 mat-sidenav-content 向左移动。 我可以通过在 mat-sidenav 上使用 [ngClass] 并按需更改它来完成第一部分 -

但是，我在抽屉右侧的内容部分并没有取得同样的成功，只是将其 CSS 类更改为具有正确的宽度..

查看源代码，我看到 mat-sidenav-content 不仅有 CSS 类，而且还有 style 属性为“margin-left:200px” （它会覆盖我设置的任何 CSS 类样式）

我想以编程方式更改此 margin-left 值。

我该怎么做？

谢谢-

Answer 1

html:

        <mat-sidenav #drawer [(ngStyle)]="{'width': myWidth}">

打字稿：

       export class HeroesComponent implements OnInit {
           myWidth: 25px;

        }