在頁面加載時打開引導程序模式angular 2

我正在開發一個angular2項目，我有兩個組件，分別是：home和first。在頁面加載時打開引導程序模式angular 2

我home.component.html是如下： -

<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>

我想要做的是：

每當用戶打開網頁，登錄模態應該首先顯示。如果用戶沒有登錄，點擊任何鏈接（Home，First或Login）應該會打開登錄模式。

我的問題是，即使單擊「登錄」鏈接，我也無法打開登錄模式。下面是我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'); 
    } 
}

的我能夠得到警報，但不是模式的內容。

請幫忙。

UPDATE - 加入我的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>

有了這個，我可以看到的模式，但它顯示出，立即消失。

來源

2017-05-26 Shiv Baral

它報告什麼錯誤，並加載了JQuery？在進行任何操作之前確認。 – koech

「$（...）.modal不是函數」 - 我得到的錯誤 –

這是因爲JQuery沒有加載。這就是爲什麼。 – koech

爲什麼使用jQuery？

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

給Angular Material dialog試試吧！

來源

2017-05-26 20:48:10

我會推薦使用Angular2 bootstrap庫。它使模態真的很容易。

來源

2017-05-26 20:52:29

將jquery cdn添加到index.html的頭部。事情是這樣的：

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

不要忘記@Component裝飾.i.e在你的.ts文件的頂部聲明變量$。

declare var $;

來源

2017-05-26 21:15:17 koech

試過這..沒有工作..錯誤消息是「$（...）。模態不是一個函數」 –

加載它在您的index.htm頭 – koech

我試圖加載這個內部的索引的頭部分.html ..我仍然得到同樣的錯誤。 –

爲了在用戶進行模態顯示第一訪問組件：

組件的TS文件：

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(); 
}

組件的HTML文件：

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

這將打開模態當用戶第一次訪問該頁面時。您將看到一個用戶無法看到的幽靈按鈕，但將通過使用this.openModal.nativeElement.click()來激活。許多使用這種方法打開模式的可能性。

打開相同的模式，當用戶點擊登錄按鈕：

HTML：

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

TS：

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

這可能不是最完美的解決方案，但它絕對有效，我經常使用它。

來源

2017-05-28 07:40:54

在頁面加載時打開引導程序模式angular 2

回答

相關問題