Question

我正在开发一个angular2项目，我有两个组件，即：home和first。

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

我想做的是：

每当用户打开网站时，应首先显示login-modal。如果用户未登录，则单击任何链接（Home，First或Login）应打开login-modal。

我的问题是我无法打开登录模式，即使我点击了＆＃34;登录＆＃34;链接。以下是我的 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');
  }
}

我能够获得警报，但不能获得模态。

请帮忙。

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

有了这个，我可以看到模态，但它会立即显示和消失。

Answer 1

在用户首次访问组件时进行模态显示：

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

这可能不是最优雅的解决方案，但它确实有效并且我经常使用它。

Answer 2

为什么要使用jquery？

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

尝试Angular Material dialog！

Answer 3

我建议使用Angular2 bootstrap库。它使模态非常简单。

Answer 4

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

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

不要忘记在@Component装饰器之前在.ts文件的顶部声明var $。

declare var $;

在页面加载角度2

4 个答案: