Angular Material Sidenav 切换动画不会 hide/display 按钮切换

Question

我是 Angular Material 组件的新手。我试图将 Sidenav 添加到我现有的个人项目中。它显示 <mat-sidenav> 和 <mat-sidenav-content> 中包含的内容但是，由于某种原因，切换动画似乎不起作用。我尝试了 3 种不同的浏览器（Edge、Firefox、Chrome）private/incognito 和 non-private/non-incognito 模式，但切换动画不起作用。

我不确定是不是因为 <mat-sidenav-container> 包含在封闭的父 div 中。我假设它不应该影响 <mat-sidenav-container>

的行为

在下图中，设置选项卡处于活动状态。问题：

Sidenav 区域在不应该加载时仍然显示（opened=false 是 SettingsComponent 中的默认值）
Toggle Opened 按钮没有效果，当您单击它时 hide/display Sidenav 区域。

settings.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.css']
})
export class SettingsComponent implements OnInit {

  opened = false;

  constructor() {}

  ngOnInit(): void {}

}

settings.component.html

<p>settings works!</p>
<mat-sidenav-container>
    <mat-sidenav [(opened)] = "opened">Sidenav</mat-sidenav>
    <mat-sidenav-content>Main
        <button (click)="opened=!opened">Toggle Opened</button>
    </mat-sidenav-content>
</mat-sidenav-container>

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor() { }

  ngOnInit() { }
}

home.component.html

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <ul class="nav nav-tabs">
        <li class="links" role="presentation"
            routerLinkActive="active"
            [routerLinkActiveOptions]="{exact: true}">
          <a routerLink="/home/mystudents">My Students</a>
        </li>
        <li class="links" role="presentation"
            routerLinkActive="active">
          <a routerLink="gradingsheet">Grading Sheet</a>
        </li>
        <li class="links" role="presentation"
            routerLinkActive="active">
          <a [routerLink]="['mastersheet']">Master Sheet</a>
        </li>
        <li class="links" role="presentation"
            routerLinkActive="active">
          <a [routerLink]="['/home/sf2']">SF2-Learners Daily Attendance</a>
        </li>
        <li class="links" role="presentation"
            routerLinkActive="active">
          <a [routerLink]="['/home/sf9']">SF9-Report Cards</a>
        </li>
        <li class="links" role="presentation"
            routerLinkActive="active">
          <a [routerLink]="['/home/sf10']">SF10-Permanent Records</a>
        </li>
        <li class="links" role="presentation"
            routerLinkActive="active">
          <a [routerLink]="['usersmasterlist']">Users Masterlist</a>
        </li>
        <li class="links" role="presentation"
            routerLinkActive="active">
          <a [routerLink]="['settings']">Settings</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="row">
      <div class="col-lg col-lg-12">
        <router-outlet></router-outlet>
      </div>
  </div>
<div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';

import { AppComponent } from './app.component';
import { MyStudentsComponent } from './my-students/mystudents.component';
import { MasterSheetComponent } from './master-sheet/mastersheet.component';
import { GradingSheetComponent } from './grading-sheet/gradingsheet.component';
import { UserComponent } from './master-sheet/user/user.component';
import { EditCredentialComponent } from './grading-sheet/edit-credential/edit-credential.component';
import { CredentialComponent } from './grading-sheet/credential/credential.component';
import { CredentialsService } from './grading-sheet/credentials.service';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { AppRoutingModule } from './app-routing.module';
import { AuthService } from './auth.service';
import { AuthGuard } from './auth-guard.service';
import { CanDeactivateGuard } from './grading-sheet/edit-credential/can-deactivate-guard.service';
import { ErrorPageComponent } from './error-page/error-page.component';
import { CredentialResolver } from './grading-sheet/credential/credential-resolver.service';
import { HeaderComponent } from './header/header.component';
import { LoginComponent } from './login/login.component';
import { SF2Component } from './sf2/sf2.component';
import { SF9Component } from './sf9/sf9.component';
import { SF10Component } from './sf10/sf10.component';
import { UsermasterlistComponent } from './usermasterlist/usermasterlist.component';
import { HomeComponent } from './home/home.component';
import { HttpClientModule } from '@angular/common/http';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatIconModule } from '@angular/material/icon';
import { MatTableModule } from '@angular/material/table';
import { MatDialogModule } from '@angular/material/dialog';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatButtonModule } from '@angular/material/button';
import { MatSortModule } from '@angular/material/sort';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatPaginatorModule } from '@angular/material/paginator';
import { AddDialogComponent } from './dialogs/add/add-dialog.component';

import { ToastrModule } from 'ngx-toastr';
import { SettingsComponent } from './settings/settings.component';


@NgModule({
    declarations: [
        AppComponent,
        MyStudentsComponent,
        MasterSheetComponent,
        GradingSheetComponent,
        UserComponent,
        EditCredentialComponent,
        CredentialComponent,
        PageNotFoundComponent,
        ErrorPageComponent,
        HeaderComponent,
        LoginComponent,
        SF2Component,
        SF9Component,
        SF10Component,
        UsermasterlistComponent,
        HomeComponent,
        AddDialogComponent,
        SettingsComponent,
    ],
    imports: [
        AppRoutingModule,
        HttpClientModule,
        BrowserModule,
        BrowserAnimationsModule,
        MatDialogModule,
        FormsModule,
        MatFormFieldModule,
        MatButtonModule,
        MatInputModule,
        MatIconModule,
        MatSortModule,
        MatTableModule,
        MatToolbarModule,
        MatPaginatorModule,
        ReactiveFormsModule,
        ToastrModule.forRoot({
            positionClass: 'toast-bottom-right'
        })
    ],
    providers: [CredentialsService, AuthService, AuthGuard, CanDeactivateGuard, CredentialResolver],
    bootstrap: [AppComponent]
})
export class AppModule { }

home.component.html 包含不同选项卡的路由链接没有错误。切换时的 hide/slide 动画无法正常工作。

有没有人遇到过类似的情况？你是怎么解决的？

谢谢。

Answer 1

我试过你的代码。 Toggle Opened closes/opens sidenav.

工作：https://stackblitz.com/edit/material-sidenav-example-csv14t?file=app%2Fsidenav-autosize-example.html

确保 import {MatSidenavModule} from '@angular/material/sidenav'; 已添加到 @NgModule。

关注API：https://material.angular.io/components/sidenav/api

Angular Material Sidenav 切换动画不会 hide/display 按钮切换

Angular Material Sidenav toggle animation doesn't hide/display on button toggle

angular-material

angular