Fatal编程技术网
  • angular/
  • Angular 页面加载时打开引导模式2

Angular 页面加载时打开引导模式2

angular

Angular 页面加载时打开引导模式2,angular,bootstrap-modal,Angular,Bootstrap Modal,我正在从事angular2项目，我有两个组成部分，即：首页和首页 我的home.component.html如下所示：- <div class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="../" class="navbar-brand">Angular 2</a>

我正在从事angular2项目，我有两个组成部分，即：首页和首页

我的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>
我能够获得警报，但无法获得模态

请帮忙

更新-添加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>


ClientApp
加载。。。
有了它，我可以看到模式，但它会立即显示并消失。

为什么要使用jquery

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

将jquery cdn添加到index.html的头部。 大概是这样的：

<script
 src="https://code.jquery.com/jquery-3.2.1.min.js"
 integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
 crossorigin="anonymous"></script>
要在用户首次访问组件时进行模式显示，请执行以下操作：

组件的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>
TS:

myFunc(){
  this.openModal.nativeElement.click();
}
这可能不是最优雅的解决方案，但它确实有效，我经常使用它

它报告了什么错误，JQuery已经加载了吗？在继续进行任何操作之前，请确认“$（…）.modal不是函数”-我得到的错误是因为没有加载JQuery。这就是为什么。@koech:-谢谢你的评论。下面是我的index.html，我添加了“只要你加载它的缩小版本，它应该不会有任何问题，因为你的浏览器会为你缓存它，这是很好的。有些人对此持不同意见，但我认为这没什么。尝试过这个..不起作用..错误消息是“$（…）。模态不是一个函数“将其加载到index.html的头中我尝试将其加载到index.html的头部分中。”。。但我仍然收到相同的错误。抱歉，我忘记添加，您需要在.ts文件中声明var$。即使在app.Component.ts文件中的@Component decorator之前声明var$。。我也犯了同样的错误 
<button id="openModal" #openModal [hidden]="true" 
 data-toggle="modal" data-target="#login-modal"></button>

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

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