Angular2 opening ngx-modalボタンをクリックしないでください

Question

私はAngular2にはとても新しいと言って前置きします。私は、失敗したログイン、コード "/失敗したログイン"の下でコメントされたアラートを開く方法を見つける必要がある、私がボタンクリックに頼っているすべての例は、ブールの状態に基づいてこれを行う方法です値？

import { Component } from '@angular/core'; 
 
import { UsersService } from '../users.service'; 
 
import { Router } from '@angular/router'; 
 
import { ModalModule } from 'ngx-modal'; 
 

 

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

 
    user: string; 
 
    pass: string; 
 
    liwr: boolean = false; 
 

 

 
    loginPressed(username, password){ 
 
    console.log(username + " " + password); 
 

 

 
\t \t this.usersService.loginAttempt(username, password).subscribe(response => { 
 
\t \t \t console.log(response[1]); 
 

 
     //admin login 
 
\t \t \t if (response[0].status === 'success' && response[1].userInfo.privilegeStatus === 'admin'){ 
 

 
\t \t \t \t this.router.navigateByUrl('/posts'); 
 
     this.usersService.authStatus = response[1].isAuth; 
 
     this.usersService.userSessionObj = response[1]; 
 

 
     //staff login 
 
     } else if (response[0].status === 'success' && response[1].userInfo.privilegeStatus === 'staff'){ 
 

 
     this.router.navigateByUrl('/staff'); 
 
     this.usersService.authStatus = response[1].isAuth; 
 
     this.usersService.userSessionObj = response[1]; 
 

 
     //failed login 
 
     } else if (response[0].status === 'invalid'){ 
 

 
     this.liwr = true; 
 
     console.log(this.liwr); 
 

 
     } 
 

 
\t \t }); 
 
    }

<div class="row"> 
 
    <button (click)="myModal.open()">open my modal</button> 
 
    <modal #myModal> 
 
     <modal-header> 
 
      <h1>Modal header</h1> 
 
     </modal-header> 
 
     <modal-content> 
 
      Hello Modal! 
 
     </modal-content> 
 
     <modal-footer> 
 
      <button class="btn btn-primary" (click)="myModal.close()">close</button> 
 
     </modal-footer> 
 
    </modal> 
 
</div>

Answer 1

あなたはViewChildを使用することができます。

import {ViewChild} from '@angular/core'; 

export class LoginComponent { 
    @ViewChild('myModal') modal: any; 
    constructor() { } 

    /... 
    else if (response[0].status === 'invalid'){ 
     this.modal.open(); 
     this.liwr = true; 
     console.log(this.liwr); 

    } 

/... 

}