时间戳

首页 > 解决方案 > 角度 6 中的 BootStrap 模态问题

angular - 角度 6 中的 BootStrap 模态问题

问题描述

我在我的项目中创建了一个自定义组件。该组件的 html 具有 Bootstrap 模式，我在其中显示一些文本，这些文本作为输入从 app 模块传递给该组件（属性名称为 testInput）。该组件的类型脚本具有用@Input 注解标记的属性名称。

在应用程序组件 html 文件中，我有这个自定义组件的两个实例，并且作为输入传递的值不同。当我运行这个项目时，自定义组件的 html（模式之外）中显示的值对于两个实例是不同的。但是，当单击按钮时，自定义组件的两个实例在模态窗口内显示的相同属性是相同的。请帮助解决问题。

app.component.html

<app-tesmodal [testInput] ="'anish'"></app-tesmodal>
<app-tesmodal [testInput] ="'anuj'"></app-tesmodal>

测试模态组件.ts

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-tesmodal',
  templateUrl: './tesmodal.component.html',
  styleUrls: ['./tesmodal.component.css']
})
export class TesmodalComponent implements OnInit {

  @Input() testInput: string;
  constructor() { }

  ngOnInit() {
  }
}

test-modal.component.html 的代码

 {‌{testInput}}
<div class="container">
    <h2>Modal Example</h2>
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
    <div class="modal" id="myModal" role="dialog">
      <div class="modal-dialog">
        <h4 class="modal-title">{‌{testInput}}</h4>

        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header </h4>
            <h4 class="modal-title">{‌{test}}</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>        
      </div>
    </div>    
  </div>

我期望模态内容对于两个不同的组件实例是不同的

标签： angulartypescriptbootstrap-modal

解决方案

Angular 正确渲染了您的组件。如果您在 chrome 中检查您的 Angular 应用程序，您可以看到两个具有正确数据的不同模态组件。但是，这里的问题是您对两个模态使用相同的 id。

在您的 test-modal.component.html 文件中，您有一个data-target="#myModal"代码。当 bootstrap 看到这段代码时，它被解释为 - 当这个按钮被点击时，显示 id = myModal 的模态框。如果只有一个模态，这将起作用。但在您的情况下，有两个 app-tesmodal 实例。这将创建两个具有相同 id myModal 的模态。因此，当您单击Open Modal按钮时，引导程序会查找 id = myModal 的第一个项目并将其打开。这就是为什么无论单击的按钮如何，您总是会获得相同的模式。

为了解决这个问题，您需要每个模式的唯一 ID。将Open Modal按钮代码替换为以下代码：

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" [attr.data-target]="'#myModal' + testInput">Open Modal</button>

将模态 div 打开标记替换为以下代码：

<div class="modal" [attr.id]="'myModal' + testInput" role="dialog">

现在，您正在根据传递给tesmodal组件的输入动态设置模态的 id。这可确保在单击按钮时触发正确的模式。

test-modal.component.html 的完整 html 代码如下：

{{testInput}}
<div class="container">
  <h2>Modal Example</h2>
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" [attr.data-target]="'#myModal' + testInput">Open Modal</button>
  <div class="modal" [attr.id]="'myModal' + testInput" role="dialog">
    <div class="modal-dialog">
      <h4 class="modal-title">{{testInput}}</h4>

      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header </h4>
          <h4 class="modal-title">{{testInput}}</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读