Question

任何人都可以帮我解释为什么我的弹出模式没有出现在页面中。我已经在我的cli中安装了bootstrap，但仍然没有显示弹出窗口。除了下面的代码，您还需要配置一些东西吗？我相信bootstrap.min.js是使模态工作的原因，我也添加了它，但它仍然没有显示

//.angular-cli.json

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],


//view.component.html
<div id="container-wrapper">
<div class="container">
    <div class = "row">
        <div class = "col-md-3"></div>
        <div class = "col-md-8 well">
            <h3 class="text-info">Account Information</h3>
            <br>
            <div class = "container-fluid">    
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>ID Number</th>
                                <th>Full Name</th>
                                <th>Email Address</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let account of accounts">
                                <td>{{account.id}}</td>
                                <td>{{account.fullname}}</td>
                                <td>{{account.email}}</td>
                                <td>
                                    <a class="teal-text" data-toggle="modal" data-target="#editmember"><i class="fa fa-pencil-square-o fa-lg"></i></a>
                                    <a class="red-text"><i class="fa fa-times fa-lg"></i></a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editmember" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form>
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title text-info" id="myModalLabel">Edit Account Details</h4>
                    </div>
                    <div class="modal-body">    
                        <div class = "form-group">
                            <label>ID Number</label>
                            <input type = "number" class = "form-control"/>
                        </div>
                        <div class = "form-group">
                            <label>Full Name</label>
                            <input type = "text" class = "form-control"/>
                        </div>
                        <div class = "form-group">
                            <label>Email Address</label>
                            <input type = "email" class = "form-control"/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-success" data-dismiss = "modal"><i class="fa fa-edit" aria-hidden="true"></i> Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

Answer 1

bootstrap的默认模式并没有按预期工作，因为angular使用的是typescript而不是javascript。看一下为模态提供模块的ngx-bootstrap：https://valor-software.com/ngx-bootstrap/#/。我在我工作的一个项目中使用它，并且它与角度很好。

Answer 2

首先 - SCNAction.rotate(by: .pi, around: SCNVector3(0, 0, 1), duration: 0.5)应位于"../node_modules/bootstrap/dist/js/bootstrap.min.js"部分，而不是scripts: []部分。

第二次 - 我建议查看https://github.com/valor-software/ngx-bootstrap这是Angular的引导包装器。它使您可以更轻松地与Angular应用程序集成。

Answer 3

从npm安装ngx-bootstrap

npm install ngx-bootstrap --save

您将需要引导样式（引导3）

index.html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

app.module.ts （推荐）

import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
  imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}

app.component.ts

import { setTheme } from 'ngx-bootstrap/utils';
@Component({…})
export class AppComponent {
  constructor() {
    setTheme('bs3'); // or 'bs4'
    …
  }
}

嵌入式编辑器不会向您显示确切的内容，因此将其100％集成到您的代码中是可行的

<button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
                  <span aria-hidden="true">&times;</span>
                </button>
  </div>
  <div class="modal-body">
    This is a modal.
  </div>
</ng-template>

import { Component, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'demo-modal-service-static',
  templateUrl: './service-template.html'
})
export class DemoModalServiceStaticComponent {
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
}

为什么PopUp模态引导程序不会出现在Angular 4中

3 个答案: