Question

使用Angular6提交登录表单后，我无法获得Toastr通知。正在学习如何使用Angular6源集成Toastr： http://technoidlab.com/angular-6-toastr-notifications-module/

本文需要运行

npm install ng6-toastr-notifications --save

并且我已经完成了此工作，并在 app.module.ts。上设置了所有配置。当我编译应用程序时，它是成功的。

我的问题是，提交登录表单后，我无法显示Toastr。是否有任何html标签元素我需要在login.html组件上设置

如果我将此代码移到logincall()函数内的下面，它将显示错误意外的';'在编译过程中

// set toastr
 showSuccess(position: any = 'top-left') {
        this.toastr.successToastr('This is success toast.', 'Success!', { position: position });
    }

//登录component.ts

import { Component, OnInit } from '@angular/core';
import { Login } from '../models/login';
import { LoginService } from '../service/login.service';

import {Router} from '@angular/router';
import { ToastrManager } from 'ng6-toastr-notifications';

@Component({
  selector: 'app-login-new',
  templateUrl: './login-new.component.html',
  styleUrls: ['./login-new.component.css']


})
export class LoginNewComponent implements OnInit {



login = new Login('', '');
  wrong ='';
  error = '';
  success = '';


  constructor(private loginService: LoginService,  private router: Router, public toastr: ToastrManager) {}


// set toastr
 showSuccess(position: any = 'top-left') {
        this.toastr.successToastr('This is success toast.', 'Success!', { position: position });
    }



  ngOnInit() {}



public loginCall(lg) {
          this.resetErrors();
          this.loginService.logdb(this.login)
            .subscribe(
      res => {

if (res.message === 'success') {
// this.success = 'Login successful';

/*


// set toastr
 showSuccess(position: any = 'top-left') {
        this.toastr.successToastr('This is success toast.', 'Success!', { position: position });
    }


*/

                }

                // Reset the form
               lg.reset();
              },
              err => this.error = err
            );
    }


  private resetErrors(){

     this.success = '';
    this.wrong = '';
    this.error   = '';
  }

}

//登录component.html

<div id="theForm">
  <h2>The form</h2>
  <form #lg="ngForm" name="theForm" (submit)="loginCall(lg)">
    <div class="form-group">
      <label>Username</label>
      <input type="text"
            class="form-control"
            name="username"
            [(ngModel)]="login.username"
            #loginUsername="ngModel"
            required
            pattern="^[a-zA-Z]+$">
      <span class="help-block danger" *ngIf="loginUsername.errors?.required && loginUsername.touched">
        The username is required
      </span>
      <span class="help-block danger" *ngIf="loginUsername.errors?.pattern && loginUsername.touched">
        The username can only contain the letters a-z or A-Z
      </span>
    </div>

    <div class="form-group">
      <label>Password</label>
      <input type="password"
            class="form-control"
            name="text"
            required
            [(ngModel)]="login.password"
            #loginPassword="ngModel">
      <span class="help-block danger" *ngIf="loginPassword.errors?.required && loginPassword.touched">
        The password is required
      </span>
    </div>

<div *ngIf="success" class="alert alert-success">{{success}}</div>
    <button
        class="btn btn-primary btn-sm"
        [disabled]="lg.invalid">Login Now</button>
  </form>
</div>
<br><br><br>

app.module.ts

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


import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { appRoutes } from './routerConfig';

import { HttpClientModule } from '@angular/common/http';

import { ToastrModule } from 'ng6-toastr-notifications';


import { AppComponent } from './app.component';

import { LoginNewComponent } from './login-new/login-new.component';




@NgModule({
  declarations: [
    AppComponent,
 LoginNewComponent
  ],

  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,

RouterModule,
 RouterModule.forRoot(appRoutes),
ToastrModule.forRoot()
  ],

  providers: [],
  bootstrap: [AppComponent]
})


export class AppModule { }

Answer 1

您缺少app.module.ts中的BrowserAnimation模块导入

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

https://stackblitz.com/edit/angular-aw9ulg

提交表单后，我无法使用角度6显示toastr

1 个答案: