Question

我在使用ngx-translate时遇到了一些麻烦，因为翻译后的文字会以所选语言 AFTER 显示主要组件。

我有一个这样的主要组件：

<app-header></app-header>
<mat-sidenav-container>
    <mat-sidenav [opened]="true">
        <app-menu></app-menu>
    </mat-sidenav>
    <mat-sidenav-content>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>
<app-footer></app-footer>

菜单组件有一个包含翻译的列表，如下所示：

<nav>
    <mat-list>
        <mat-list-item>{{ 'app.list.home' | translate }}</mat-list-item>
        <mat-list-item>{{ 'app.list.contact' | translate }}</mat-list-item>
    </mat-list>
</nav>

呈现页面时，mat-sidenav-content的宽度低于mat-sidenav margin-left。我认为这是因为计算了{strong> AFTER margin-left的菜单翻译。这会导致mat-sidenav与mat-sidenav-content重叠。

我对角度很新，我不知道是否有办法解决这个问题，比如在渲染sidenav之前以某种方式“调用”翻译或类似的东西。

最好的问候。

Answer 1

我通过给mat-nav-list固定宽度解决了这个问题。

<mat-nav-list style="width: 250px;">

Answer 2

如果有人需要说明：

在翻译文本之前计算组件的边距。因此导航栏的大小小于其实际大小。

我使用的解决方案：

ngAfterViewChecked() {
  // margin are calculated before translation gives the final size for the sidenav
  window.dispatchEvent(new Event('resize'));
}

这有助于： Angular Incorrect Margin-Left Applied To Sidenav Content

别忘了：

implements AfterViewChecked

Answer 3

不确定，如果是同样的问题，但我有一个类似的情况，在 init 之后导航的大小发生了变化。就我而言，我有一个可折叠的子导航，可以向右增加大小。一个非常简单的解决方案是 <mat-sidenav-container> 中的“autosize”属性。

<mat-sidenav-container style="height: 100%" autosize>
...
</mat-sidenav-container>

在这里找到解决方案： https://github.com/crisbeto/material2/blob/8187a0c6896e4e3ea2a6748d90724ac3c880cd60/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav

Angular 6 - Sidenav与ngx-translate重叠内容

3 个答案: