Angular6 棱角6材料。如何为垫式集装箱制造橡胶?
我有一个响应垫sidenav,它是用角材料6生成的。导航面板的打开/关闭按钮工作良好,但随后导航面板是打开面板的一部分内容 如何使内容部分像橡胶一样:Angular6 棱角6材料。如何为垫式集装箱制造橡胶?,angular6,angular-material-6,Angular6,Angular Material 6,我有一个响应垫sidenav,它是用角材料6生成的。导航面板的打开/关闭按钮工作良好,但随后导航面板是打开面板的一部分内容 如何使内容部分像橡胶一样: <!--CONTENT--> <main> <router-outlet></router-outlet> </main> 打字稿侧: export class SiteLayoutComponent { links = [ {url: '/vds_li
<!--CONTENT-->
<main>
<router-outlet></router-outlet>
</main>
打字稿侧:
export class SiteLayoutComponent {
links = [
{url: '/vds_list', name: 'Статистика'},
{url: '/profile', name: 'Личный кабинет'}
];
isOpened;
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches)
);
constructor(private breakpointObserver: BreakpointObserver,
private auth: AuthService,
private router: Router) {
}
logout(event: Event) {
event.preventDefault();
this.auth.logout();
this.router.navigate(['/login']);
}
}
我正在尝试通过[ngStyle]将内容的宽度绑定到mat sidenav的[Open]=Ispened状态
但不是工作。如何解决此问题?您的内容区域需要位于工具栏下方的mat sidenav容器内:
<mat-sidenav-container class="sidenav-container">
<mat-sidenav
mode="side"
#drawer
class="sidenav"
[(opened)]="isOpened"
fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async)"
>
<mat-nav-list>
<span
*ngFor="let link of links"
routerLinkActive="active"
>
<a mat-list-item [routerLink]="[link.url]">
{{link.name}}
</a>
</span>
<span style="position: absolute; bottom: 1px; width: 100%">
<a mat-list-item class="waves-effect waves-orange" (click)="logout($event)">
Выйти
</a>
</span>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content style="display:flex; flex-direction:column;">
<mat-toolbar color="primary">
<button mat-icon-button (click)="drawer.toggle()">
<mat-icon>menu</mat-icon>
</button>
<span style="margin-left: 45%">Oasis Bot Manager</span>
</mat-toolbar>
<!--CONTENT-->
<main>
<router-outlet></router-outlet>
</main>
</mat-sidenav-content>
</mat-sidenav-container>
<mat-sidenav-container class="sidenav-container">
<mat-sidenav
mode="side"
#drawer
class="sidenav"
[(opened)]="isOpened"
fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async)"
>
<mat-nav-list>
<span
*ngFor="let link of links"
routerLinkActive="active"
>
<a mat-list-item [routerLink]="[link.url]">
{{link.name}}
</a>
</span>
<span style="position: absolute; bottom: 1px; width: 100%">
<a mat-list-item class="waves-effect waves-orange" (click)="logout($event)">
Выйти
</a>
</span>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content style="display:flex; flex-direction:column;">
<mat-toolbar color="primary">
<button mat-icon-button (click)="drawer.toggle()">
<mat-icon>menu</mat-icon>
</button>
<span style="margin-left: 45%">Oasis Bot Manager</span>
</mat-toolbar>
<!--CONTENT-->
<main>
<router-outlet></router-outlet>
</main>
</mat-sidenav-content>
</mat-sidenav-container>