Question

在下面的工作演示中，单击see example链接时，将出现一个模式框。该代码位于Bootstrap中（无角）。

https://codepen.io/manuchadha/pen/PBKYBJ

我想在Angular中编写相同的逻辑。我想到了创建一个新组件并将要在模式中显示的消息传递为Input的方式，如下所示：

dialog-box.component.ts

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-dialog-box',
  templateUrl: './dialog-box.component.html',
  styleUrls: ['./dialog-box.component.css']
})
export class DialogBoxComponent implements OnInit {

  @Input() dialogMessage:string; //pass the message to be shown in this modal
  constructor() { }

  ngOnInit() {
  }

}

在组件的html中，我写了Bootstrap的模式代码

<!--Modal. Should be hidden unless some clicked event makes this visible-->
<div class="modal" tabindex="-1" role="dialog" id="exampleModal">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Example</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>{{dialogMessage}}</p> <¬-the message passed to this component should show here -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

在我的另一个HTML文件（具有see example链接）中，我想调用此组件。但是我无法弄清楚如何调用该组件。

问题1 -我尝试通过以下方式使用模式，但遇到错误<a href="#" data-toggle="modal" data-target="#exampleModal">See Example</a><app-dialog-box [dialogMessage]="some message"></app-dialog-box>

错误是Parse Error - unexpected token message。我想它指向[dialogMessage]="some message"

问题2 -如果我在同一个html文件中有多个<a href="#" data-toggle="modal" data-target="#exampleModal">See Example</a><app-dialog-box [dialogMessage]="some message"></app-dialog-box>客栈，可以采用上述方法吗？我正在创建的表单具有多个字段，并且我想为每个字段提供see example链接。我担心的是，我是否最终会在同一个html页面中使用多个<app-dialog-box，且其ID为exampleModal。

更新-我找到了问题1的答案。我应该在双引号内使用单引号，即<app-dialog-box [dialogMessage]="'some message'"</app-dialog-box>。

但是新的问题是，如果我对所有see example链接使用相同的逻辑，那么我看不到正确的消息，即

<a href="#" data-toggle="modal" data-target="#exampleModal">See Example</a><app-dialog-box [dialogMessage]="'some message'"></app-dialog-box>

和

<a href="#" data-toggle="modal" data-target="#exampleModal">See Example</a><app-dialog-box [dialogMessage]="'some message2'"></app-dialog-box>

单击任一链接时，我总是收到消息some message，而不是some message和some message2

Answer 1

这个问题（如我先前所怀疑的）是多个具有相同ID id="exampleModal"的问题。我在创建

时通过传递ID和输入来解决它

更改dialog-box.component.ts

@Input() dialogID:string;

更改组件的html

<div class="modal" tabindex="-1" role="dialog" id="{{dialogID}}">

然后将代码称为

<small id="language-select-help" class="form-text text-muted"><a href="#" data-toggle="modal" data-target="#exampleModal">See Example</a><app-dialog-box [dialogMessage]="'some message'" [dialogID]="'id1'"></app-dialog-box></small>

和

<small id="question-title-help" class="form-text text-muted"><a href="#" data-toggle="modal" data-target="#exampleModal">See Example</a><app-dialog-box [dialogMessage]="'some message2'"  [dialogID]="'id1'"></app-dialog-box></small>

无法在Angular中创建模式对话框

1 个答案: