Question

我创建了一个名为appmenu的组件

以下是 appmenu.component.html

的代码

<ul>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
</ul>

我想在 app.component.html

中显示此菜单

app.component.ts 如下：

import { Component, trigger, state, style, transition, animate } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
   animations: [
    trigger('slideInOut', [
      state('in', style({
        transform: 'translate3d(0, 0, 0)'
      })),
      state('out', style({
        transform: 'translate3d(100%, 0, 0)'
      })),
      transition('in => out', animate('400ms ease-in-out')),
      transition('out => in', animate('400ms ease-in-out'))
    ]),
  ]
})
export class AppComponent {

  title = 'app works!';

  menuState:string = 'out';

  toggleMenu() {
    // 1-line if statement that toggles the value:
    this.menuState = this.menuState === 'out' ? 'in' : 'out';
  }


}

在 app.component.html 上，当我点击下面的按钮时，它应该使用toggleMenu（）函数为菜单设置动画，但是当我点击它时会给我这个错误 错误错误：找到合成属性@slideInOut。请在您的应用程序中包含“BrowserAnimationsModule”或“NoopAnimationsModule”。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>
<button (click)="toggleMenu()" class="hamburger">
  <span>toggle menu</span>
</button>
<h1>
  {{title}}
</h1>
<ul>
  <li><a routerLink="/login">Login</a></li>
<li><a routerLink="/sections">Browse Sections and create New</a></li>
<li><a routerLink="/mysections">Edit My Sections</a></li>

</ul>
<router-outlet></router-outlet>

<app-appmenu [@slideInOut]="menuState"></app-appmenu>

我用Google搜索了错误，我发现我应该在app.module.ts中添加以下行，我也做了 -

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

imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(appRoutes), BrowserAnimationsModule ],

并安装了npm install @angular/animations --save

我正在尝试按照本教程 - https://blog.thecodecampus.de/angular-2-animate-creating-sliding-side-navigation/

指导我如何解决此错误

我的 app.component.html 页面的图片显示如下错误 click here

Answer 1

安装＆＃39; @ angular / animations＆＃39;

是必要的

npm install --save @angular/animations@latest

另外，在文件＆＃39; app.module.ts＆＃39;

中导入BrowserAnimationsModule

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

要完成，需要插入字符串＆＃39; BrowserAnimationsModule＆＃39;在@NgModule的导入中，如下所示：

@NgModule({
  imports: [
    ...
    BrowserAnimationsModule \\ <- HERE
  ]
})

动画在幻灯片导航菜单中不起作用 - Angular2

1 个答案: