Open bootstrap modal on page load angular 2

问题

I am working on an angular2 project and I have 2 components namely: home and first.

My home.component.html is as below :-

<div class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="../" class="navbar-brand">Angular 2</a>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-main">
          <ul class="nav navbar-nav">

            <li>
              <a routerLink="Home">Home</a>
            </li>
            <li>
              <a routerLink="First">First</a>
            </li>

          </ul>

          <ul class="nav navbar-nav navbar-right">

            <li><a href="#" data-toggle="modal" data-target="#login-modal" (click)="myFunc()">Login</a></li>
          </ul>

        </div>
      </div>
    </div>

    <div class = "container">
      <router-outlet></router-outlet>
    </div>

<!-- Modal -->
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
          <div class="modal-dialog">
                <div class="loginmodal-container">
                    <h1>Login to Your Account</h1><br>
                  <form>
                    <input type="text" name="user" placeholder="Username">
                    <input type="password" name="pass" placeholder="Password">
                    <input type="submit" name="login" class="login loginmodal-submit" value="Login">
                  </form>

                  <div class="login-help">
                    <a href="#">Register</a> - <a href="#">Forgot Password</a>
                  </div>
                </div>
            </div>
          </div>

What I want to do is :

Whenever the user opens the website, the login-modal should show first. If the user is not logged-in, clicking on any link (Home,First or Login) should open the login-modal.

My problem is that I am not able to open the login modal, even when I click the "Login" link. Below is the content of my app.component.ts

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app works!';

  ngOnInit(){
    alert("Loaded");
  }

  myFunc(){
   $("#login-modal").modal('show');
  }
}

I am able to get the alert but not the modal.

Please help.

UPDATE - adding my index.html

<!doctype html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>ClientApp</title>
  <base href="/">
  <link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.min.css">


  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>
</html>

With this I can see the modal but it show and disappears immediately.

回答1:

To make the modal display upon user first visiting the component:

Component's TS file:

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

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

export class AppComponent implements OnInit{
@ViewChild('openModal') openModal:ElementRef;

title = 'app works!';

ngOnInit(){
 this.openModal.nativeElement.click();
}

Component's HTML file:

<button id="openModal" #openModal [hidden]="true" 
 data-toggle="modal" data-target="#login-modal"></button>

This will open the modal upon the user first visiting the page. You'll have a ghost button that the user can not see, but will be activated by using this.openModal.nativeElement.click(). Lots of possiblities using this method to open the modal.

To open the same modal when the user clicks the login button:

HTML:

<li><a href="#" data-toggle="modal" data-target="#login-modal" 
(click)="myFunc()">Login</a></li>

TS:

myFunc(){
  this.openModal.nativeElement.click();
}

This may not be the most elegant solution, but it definitely works and I use it quite often.

回答2:

Why using jquery?

$("#login-modal").modal('show');

Give Angular Material dialog a try!

回答3:

I would recommend using the Angular2 bootstrap library. It makes modals really easy.

回答4:

Add jquery cdn to the head of your index.html. Something like this:

<script
 src="https://code.jquery.com/jquery-3.2.1.min.js"
 integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
 crossorigin="anonymous"></script>

Don't forget to declare var $ at the top of your .ts file before @Component decorator .i.e.

declare var $;

来源：https://stackoverflow.com/questions/44209691/open-bootstrap-modal-on-page-load-angular-2

标签

angular

bootstrap-modal