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

Question

I'm having some troubles using ngx-translate , because translated texts are shown in the selected language AFTER the main component is shown.

I have a main component like this:

<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>

The menu component has a list with translations, like this:

<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>

When the page is rendered, the mat-sidenav-content has a margin-left lower than mat-sidenav width. I assume that it happens because the menu translations where made AFTER the margin-left was calculated. This causes the mat-sidenav overlaps the mat-sidenav-content .

I'm pretty new with angular and I don't know if there is a way to fix that, like "calling" the translation somehow before rendering the sidenav or something like that.

Best regards.

Answer 1

我通过给 mat-nav-list 固定宽度解决了它。

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

Answer 2

If anyone needs an explanation:

The margin of the component is calculated before the text is translated. So the size of the navbar is less than its actual size.

Solution I used:

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

This helped: Angular Incorrect Margin-Left Applied To Sidenav Content

Don't forget:

implements AfterViewChecked

Answer 3

Not sure, if its the same problem, but I had a similar case, where the size of the navigation changed after init. In my case I had a collapsible sub navigation, that could increase the size to the right. A very easy solution for that was the "autosize" attribute in the <mat-sidenav-container> .

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

Found the solution here: https://github.com/crisbeto/material2/blob/8187a0c6896e4e3ea2a6748d90724ac3c880cd60/src/lib/sidenav/sidenav.md#resizing-an-open-sidenav