自举4.0“；“模态”；不使用Angular 4

在Angular 4项目中，很难让a工作

在一个简单的静态HTML页面中，模式非常有效：

启动演示模式
情态标题
&时代；
...
接近
保存更改

您可以在下面的屏幕截图中看到，按下显示模式会导致html在多个位置发生更改，不仅是在模型html本身中，文档的

元素也会被操纵

执行HTML操作的引导JavaScript在Angular 4项目中似乎没有启动，当我在项目中使用完全相同的代码时，HTML根本没有改变

---

有没有另外一种方法，我应该使用角4引导？或者我应该使用另一种非引导的Angular 4模式解决方案吗？

导入引导cdn时，能否尝试在jQuery之后添加TetherJS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

您可以使用库来执行此操作。安装库后，请执行以下步骤。

步骤1：将以下代码添加到app.module.ts文件中

import { ModalModule, BsModalRef } from 'ngx-bootstrap';

@NgModule({
 imports: [ModalModule.forRoot(),...],
 providers: [BsModalRef]
})

步骤2：复制以下代码并粘贴到app.commponent.html

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

创建模板模式
情态动词
&时代；
这是一个模态。

步骤3：最后将以下代码复制到app.component.ts

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

export class AppComponent {
    modalRef: BsModalRef;
    constructor(private modalService: BsModalService) {}

    openModal(template: TemplateRef<any>) {
        this.modalRef = this.modalService.show(template,{ backdrop: 'static', keyboard: false });
    }
}

从'@angular/core'导入{Component，TemplateRef}；
从“ngx引导/模式”导入{BsModalService}；
从“ngx引导/modal/bs-modal-ref.service”导入{BsModalRef}；
导出类AppComponent{
modalRef:BsModalRef；
构造函数（私有modalService:BsModalService）{}
OpenModel（模板：TemplateRef）{
this.modalRef=this.modalService.show（模板，{background:'static'，键盘：false}）；
}
}

在angular中使用bootstrap最简单的方法是使用一个库，如（仍在测试版中），或者如果它不必是bootstrap，您可以尝试使用材质库进行angular

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

export class AppComponent {
    modalRef: BsModalRef;
    constructor(private modalService: BsModalService) {}

    openModal(template: TemplateRef<any>) {
        this.modalRef = this.modalService.show(template,{ backdrop: 'static', keyboard: false });
    }
}