Sidenav打破了应用Angular 5错误

时间:2017-12-15 19:04:50

标签: angular angular-material angular-material2

我正在使用 Angular 5 / Material 2 / Flex-Layout - 当我尝试添加标记## Heading ## <mat-sidenav-container>分页符时,请不要加载剩余的内容保持和加载。

缺少什么?我附上了代码:

<div style="height: 20vh;">
    <mat-toolbar role="heading" aria-label="navigation">
        <mat-toolbar-row>
            <nav mat-tab-nav-bar>
                <a mat-tab-link
                   *ngFor="let link of navLinks"
                   [routerLink]="link.path"
                   routerLinkActive #rla="routerLinkActive"
                   [active]="rla.isActive">
                    {{link.label}}
                </a>
            </nav>
            <!-- Mobile Button Nav -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="fa fa-bars fa-lg"></span>
            </button>

            <span class="fill-remaining-space"></span>
        </mat-toolbar-row>

        <div fxShow="true" fxHide.gt-sm="true">
            <a href="#" (click)="sidenav.open()">Show Side Menu</a>
        </div>

    </mat-toolbar>

    <mat-sidenav-container fxFlexFill class="nav-mobile-container">
        <mat-sidenav #sidenav fxLayout="column">
            <div fxLayout="column">
                <a (click)="sidenav.close()" href="#" mat-button>Close</a>
                <a href="#" mat-button>Menu Item 1</a>
            </div>
        </mat-sidenav>
        <mat-sidenav-content fxFlexFill>Main content</mat-sidenav-content>
    </mat-sidenav-container>
    </div>

我要做的是移动设备的响应式导航栏。

在控制台上附加错误:

enter image description here

1 个答案:

答案 0 :(得分:0)

您需要在模块中导入模块MatSidenavModule。