Angular：使用跨 3 个组件的图标切换 Sidenav答案

【问题标题】：Angular: Toggle Sidenav with Icons across 3 componentsAngular：使用跨 3 个组件的图标切换 Sidenav
【发布时间】：2021-12-18 21:03:44
【问题描述】：

我正在尝试开发一个主页来切换我已经成功完成的 sidenav，但是，如果 sidenav 关闭，我仍然希望在左侧显示图标而不是图标和文本（打开时）。我有三个组件：app、header 和 side-nav。

切换器位于标题组件中，我创建了一个事件绑定器，以便切换时 sideNav 中的文本消失。这个问题是页面没有作为结果进行调整，sidenav 仍然是相同的大小但文本更少。请参阅下面的代码（我只使用了我认为与此问题相关的代码的 sn-p）。

不确定这是打字稿问题还是 CSS 问题？

header.html

  <button mat-icon-button (click)="toggleSideNav()"><mat-icon>menu</mat-icon></button>

header.ts

 @Output() onToggleSideNav: EventEmitter<any> = new EventEmitter();

toggleSideNav() {
    this.onToggleSideNav.emit();
  }

app.html

<mat-drawer-container>
    <mat-drawer mode="side" [opened]=true>
        <app-side-nav [isExpanded]='sideNavOpen'></app-side-nav>
    </mat-drawer>
    <mat-drawer-content>
        <app-header (onToggleSideNav)='sideNavToggler()'></app-header>
        <router-outlet></router-outlet>
    </mat-drawer-content>
</mat-drawer-container>

app.ts

sideNavOpen: boolean = true;
  sideNavToggler() {
    this.sideNavOpen = !this.sideNavOpen
  }

sidenav.html

<mat-nav-list>
    <a mat-list-item routerLink="/home" routerLinkActive="list-item-active">
        <mat-icon>home</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Home</h4>
    </a>
</mat-nav-list>

sidenav.ts

 @Input() isExpanded: boolean = true;

【问题讨论】：

你的问题和stackoverflow.com/questions/46835554/…很相似

标签： angular typescript sidenav

【解决方案1】：

我从你的代码中得到...

sidenav.ts 文件具有硬编码输入。所以无论它有什么值，它都会被true 值覆盖。不设置它以在初始化@Input() isExpanded: boolean; 期间获取其传入的动态值。如果您需要处理输入的值，则可以在ngOnChanges() 中完成。
原始<mat-drawer> 没有硬编码宽度，并且可以对其内部内容大小变化做出反应（https://material.angular.io/components/sidenav/overview#sidenav-autosize）。可能，您的app-side-nav 组件的模板没有改变宽度。根据您的要求，它应该根据isExpanded 的值进行更改。请检查是否使用了isExpanded。例如，

<div id="app-side-nav" [ngClass]="{'expandedWidth': isExpanded, 
  'autoWidth': !isExpanded}">
...
</div>

CSS 关注的地方。

.expandedWidth {
  width: 200px;
}
.autoWidth{
  width: auto;
}

此外，还需要添加一些令人愉悦的 CSS 内容以使您的应用程序更加流畅。将transitions 添加到宽度更改中。那么您的应用程序将在更改时更加流畅。例如，为<app-side-nav> 的父元素：transition: all 1s ease-out; 添加一个带有“缓出”计时功能的 1 秒内任何变化的过渡。

希望，这会有所帮助。

【讨论】：