如何编辑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上使用[ngClass]并按需更改它-

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

查看源代码，我发现mat-sidnav内容不仅有CSS类，而且还有"margin-left:200px"的样式属性(它覆盖了我设置的任何CSS类样式(

我想用程序改变这个左边距的值。

我该怎么做？

谢谢-

Answer 1

html:

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

打字脚本：

export class HeroesComponent implements OnInit {
myWidth: 25px;
}