angular - Angular 材质扩展面板错误 - TypeError: this.driver.containsElement is not a function
问题描述
Angular 材质的扩展面板依赖于 BrowserAnimationsModule。我已经包含了动画模块,但是当我创建一个简单的扩展面板时,它会因错误而崩溃:
错误类型错误:this.driver.containsElement 不是 TransitionAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine._balanceNamespaceList (browser.js:2765) 处的函数 TransitionAnimationEngine.push../node_modules /@angular/animations/fesm5/browser.js.TransitionAnimationEngine.createNamespace (browser.js:2743) 在 TransitionAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.register (browser.js: 2784) 在 InjectableAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.AnimationEngine.register (browser.js:3815) 在 AnimationRendererFactory.push../node_modules/@angular/platform-browser/fesm5/ Animations.js.AnimationRendererFactory.createRenderer (animations.js:140) 在 DebugRendererFactory2.push../node_modules/@angular/core/fesm5/core.js.DebugRendererFactory2.createRenderer (core.js:12225) at createComponentView (core.js:11179) at callWithDebugContext (core.js:12204) at Object.debugCreateComponentView [as createComponentView] (core.js:11715) 在 createViewNodes (core.js:11220)
home.component.html
<div class="container-fluid">
<div id="sidebar">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
This is the expansion title
</mat-panel-title>
<mat-panel-description>
This is a summary of the content
</mat-panel-description>
</mat-expansion-panel-header>
<p>This is the primary content of the panel.</p>
</mat-expansion-panel>
</div>
<div id="map" style="height: 550px"></div>
</div>
home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { CoreModule } from '@app/core';
import { SharedModule } from '@app/shared';
import { HomeRoutingModule } from './home-routing.module';
import { HomeComponent } from './home.component';
import { QuoteService } from './quote.service';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { MatExpansionModule } from '@angular/material/expansion'
@NgModule({
imports: [
CommonModule,
TranslateModule,
CoreModule,
SharedModule,
HomeRoutingModule,
LeafletModule,
MatExpansionModule
],
declarations: [
HomeComponent
],
providers: [
QuoteService
]
})
export class HomeModule { }
请注意,这是一个使用 @angular/material 、 @angular/cdk 和 @angular/animations 安装的简单 Angular 6 应用程序
Angular 和包版本:
Angular CLI:6.0.7 节点:8.9.3 操作系统:win32 x64 Angular:6.0.3
@angular-devkit/architect 0.6.7 @angular-devkit/build-angular 0.6.7 @angular-devkit/build-optimizer 0.6.7 @angular-devkit/core 0.6.7 @angular-devkit/schematics 0.6.7 @角度/动画 6.0.6 @angular/cdk 6.3.1 @angular/cli 6.0.7 @angular/material 6.3.1 @ngtools/webpack 6.0.7 @schematics/angular 0.6.7 @schematics/update 0.6.7 rxjs 6.2 .0 打字稿 2.7.2 webpack 4.8.3
解决方案
该版本的动画包似乎存在错误。进行临时修复并回滚到 6.0.5。它将解决您的问题,如此stackblitz所示(您的动画版本会引发错误)。
npm install --save @angular/animations@6.0.5
如果这不能解决问题,请对有问题的软件包进行完整更新:
$ ng update @angular/cli
$ ng update @angular/core
$ ng update @angular/material
推荐阅读
- python-3.x - 从当前列中减去上一列
- python-3.x - 将 pandas 数据框列与 Set 进行比较
- angular - 组件 class_1 不是任何 NgModule 的一部分
- excel - 如何为 vlookup 设置 Excel VBA 循环
- javascript - 在javascript中修改元素
- c++ - Win32API - 如何确定哪个文件被哪个进程保存?
- python - 如何在HSV opencv python中指定颜色的上限值和下限值
- apache - 如何在 mahout 中实现趋势推荐器
- geotools - geotools PostGIS DataStore 有没有办法使用 JEE 数据源?
- excel - VB计数器,从单元格中获取数据