根据传递的参数显示不同信息的单个组件

Question

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

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

modals.component.html:

这是我定义模型外观的地方。 'title' 和 'content' 是此模式在 .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

这是在 'title' 和 'content' 下接受模态输入的地方。

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 之一时，应该创建一个模式（它是）并且应该显示指定的内容。但是在所有情况下，无论单击哪个 div，都只会显示 'Title 1' 和 'Content 1'。

  <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 值，"modal"。然后当你使用 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 {}
}

根据传递的参数显示不同信息的单个组件

A single component displaying different information based on passed arguments

typescript2.0

angular