【问题标题】:Toaster is not triggering in angular4烤面包机未在 angular4 中触发
【发布时间】:2017-11-08 07:38:05
【问题描述】:

我已经通过使用此链接在我的 Angular 4 项目中实现了烤面包机 -> http://www.codershood.info/2017/04/14/showing-notification-using-toaster-angular-2/

当我通过按钮点击触发它时,它工作得非常好

我添加了一个按钮,例如

<div class="btn btn-success" (click)="showSuccess()">Success Notification</div>

我添加了以下功能

public showSuccess(){    
      this.toastr.success("Success", 'You are on right track.');
  }

它工作得很好,但是当我尝试按照以下方式调用它时,它就不起作用了:

编辑:添加完整的组件代码

import { Component, OnInit,ViewContainerRef } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import {Router} from '@angular/router';
import { AuthService } from '../services/auth.service';
import { Constants } from '../../constants';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';
import { EmployeeComponent } from '../employee/employee.component';





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

export class LoginComponent implements OnInit {

     title = 'GGMD ';
   invalidLogin: boolean;

  constructor(
    private router: Router,
    private authService: AuthService,
    public toastr: ToastsManager, 
    public _vcr: ViewContainerRef) {
    this.toastr.setRootViewContainerRef(_vcr);
  } 

  ngOnInit() {
  }
public showSuccess(){    
      this.toastr.success("Success", 'You are on right track.');
  }

    signIn(credentials){

        let response = this.authService.logIn(credentials);
        if(response.AuthenticationStatus === true){

          switch(response.Role){

               case 'employee':
                this.router.navigate(['/employee']);
                this.toastr.success("Success", 'You are on right track.');
                console.log("Success", 'You are on right track.');
                break;

              case 'manager':
                this.router.navigate(['/manager']);
                console.log('I am manager');
                break;

              default:
                console.log( error);
        }
      }
    }

日志正在工作并成功导航,但烤面包机不工作。 我也尝试过类似传递函数,例如

 this.router.navigate(['/employee']);
                this.showSuccess()
                console.log("Success", 'You are on right track.');

【问题讨论】:

  • 调试时。你的断点命中了吗?
  • 你能分享你的打字稿组件的完整代码吗?
  • @Metehan Senol 我现在已经编辑了我的问题

标签: angular angular-toastr


【解决方案1】:

这将不起作用,因为您更改了根 this.router.navigate(['/employee']);

尝试在 this.router.navigate(['/employee']); 之前添加 toast 代码

      this.toastr.success("Success", 'You are on right track.');
      this.router.navigate(['/employee']);

我不确定上述方法是否可行,其他解决方案是您可以在员工组件构造函数中显示 toast

【讨论】:

  • 如果控制通过了,那么为什么console.log可以工作,我也尝试过这种方式,但它也不起作用。
  • @MikiJay 这意味着你必须在员工组件构造函数中显示你的吐司
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-08-07
  • 2018-02-26
  • 2019-03-29
  • 2022-07-29
  • 1970-01-01
  • 2019-08-05
  • 1970-01-01
相关资源
最近更新 更多