Question

我有两个独立的组件。一个是Modal生成器，它根据传递给它的信息创建一个模态，第二个组件只是用相关信息调用ModalComponent。

我有一个设置，在单个页面上我想调用相同的ModalComponent，但有两个不同的参数。因此，当您单击它们时，第一个将显示第一组信息，第二个将显示第二组信息。问题是他们都显示第一组信息。在代码中解释这一点会更容易：

modals.component.html：

这是我定义模型的样子。＆＃39;标题＆＃39;和＆＃39;内容＆＃39;是这个模式在.ts文件中接受并在此处显示的参数。

<div class="btn btn-primary"
     data-toggle="modal"
     data-target="#modal"
     style="height: 400px; width: 400px;">
  Launch demo modal
</div>

<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">
          {{title}}
        </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>{{content}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

modals.component.ts

这是在＆＃39;标题＆＃39;下接受模态输入的地方。和＆＃39;内容＆＃39;。

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

@Component({
  selector: 'app-modals',
  templateUrl: './modals.component.html',
  styleUrls: ['./modals.component.css']
})

export class ModalsComponent implements OnInit{


  @Input('title') title: string;
  @Input('content') content: string;

  constructor() {}

  ngOnInit(): void {}
}

awareness.component.html

这里我在HTML页面中调用模态。所以当我点击其中一个div时，应该创建一个模态（它是），并且应该显示指定的内容。但是在所有情况下，只有＆＃39;标题1＆＃39;和＆＃39;内容1＆＃39;无论单击哪个div，都会显示。

  <div class="row">
    <div class="col-sm-12 text-center">
      Below you can find more information about vaccinations.
    </div>
    <div class="col-sm-6">
        <app-modals [title]="'Title 1'" [content]="'Content 1'"></app-modals>
    </div>
    <div class="col-sm-6">
        <app-modals [title]="'Title 2'" [content]="'Content 2'"></app-modals>
    </div>
    <div class="col-sm-3">
    </div>
    <div class="col-sm-3">

    </div>
  </div>

Answer 1

这是因为您只有一个id值，＆＃34;模态＆＃34;。当您使用document.querySelector('#modal')或document.getElementById('modal')之类的内容时，您只会获得第一个内容。

相反，要么需要将唯一ID传递到您的组件中，要么使用this.id = 'modal' + modalId++;之类的内容自动生成一个ID。

<强> modals.component.html

<div class="btn btn-primary"
     data-toggle="modal"
     [attr.data-target]="'#' + id"
     style="height: 400px; width: 400px;">
  Launch demo modal
</div>

<!-- Modal -->
<div class="modal fade" [id]="id" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">
          {{title}}
        </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>{{content}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<强> modals.component.ts

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

let modalId = 0;

@Component({
  selector: 'app-modals',
  templateUrl: './modals.component.html',
  styleUrls: ['./modals.component.css']
})

export class ModalsComponent implements OnInit{

  @Input() title: string;
  @Input() content: string;
  id = `modal${modalId++}`; // generate the unique ID

  constructor() {}

  ngOnInit(): void {}
}

单个组件根据传递的参数

1 个答案: