Question

我有一个模板，如果在django中使用它可以正常工作，但是现在我开始使用角度，动画方面存在很多问题，例如，当我单击django中的这个简单按钮时

<div class="m-login__form-action">
   <button type="button" id="m_login_signup" class="btn btn-outline-focus m-btn--pill">Crea un Account</button>
</div>

它为移动的页面设置了动画，然后向我显示了一个要注册的页面，但是当我单击同一按钮时，出现了一个角度：

Uncaught TypeError: Cannot read property 'addEventListener' of undefined
at Object.one (scripts.bundle.js:1)
at Object.animateClass (scripts.bundle.js:1)
at HTMLButtonElement.<anonymous> (login.js:1)
at HTMLButtonElement.dispatch (vendors.bundle.js:1)
at HTMLButtonElement.g.handle (vendors.bundle.js:1)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
at invokeTask (zone.js:1744)
at HTMLButtonElement.globalZoneAwareCallback (zone.js:1770)

可能我没有在模块或组件中导入某些内容，但是我不知道为什么。该错误可能与jquery有关吗？

我想指定其他一些动画组件可以工作。如果您需要其他文件，请告诉我，谢谢！

login.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/auth.service'
import { Router, Params } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormsModule } from '@angular/forms';


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent{

  loginForm: FormGroup;
  errorMessage: string = '';
  registerForm: FormGroup;
  successMessage: string = '';

  constructor(
    public authService: AuthService,
    private router: Router,
    private fb: FormBuilder
  ) {
    this.createForm();
  }
tryLogin(value){
    console.log(value);
    this.authService.doLogin(value)
    //.then(res => {
    //  this.router.navigate(['/user']);
    //}, err => {
    //  console.log(err);
    //  this.errorMessage = err.message;
    //})
  }
  tryRegister(value){
     this.authService.doRegister(value)
     .then(res => {
       console.log(res);
       this.errorMessage = "";
       this.successMessage = "Your account has been created";
     }, err => {
       console.log(err);
       this.errorMessage = err.message;
       this.successMessage = "";
     })
   }
}

app.module.ts

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

import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireAuthModule } from 'angularfire2/auth';

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


import { environment } from '../environments/environment';

import { ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { MissionComponent } from './mission/mission.component';
import { MaterialComponent } from './material/material.component';
import { BinComponent } from './bin/bin.component';
import { UserComponent } from './user/user.component';
import { ScriptLoaderService } from "./_services/script-loader.service";


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    MissionComponent,
    MaterialComponent,
    BinComponent,
    UserComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireAuthModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,

  ],
  providers: [ScriptLoaderService],
  bootstrap: [AppComponent]
})
export class AppModule { }

更新Stackblitz stackblitz

我的模板（如果用于角度）无法正常工作

0 个答案: