具有动态内容的角度6模态弹出窗口

Question

在我的项目中，我有一个大约50个用户的用户列表。通过单击每个用户名，相应的用户信息应显示在模式弹出窗口中。

我不知道如何在我的代码的弹出窗口中通过ID加载内容。

我有2个组成部分。用户列表和用户详细信息。

<li><a href="javascript:void()" data-toggle="modal" data-target="#personal-details">user 1</a></li>
<li><a href="javascript:void()" data-toggle="modal" data-target="#personal-details">user 2</a></li>...

 <!-- POPUP PERSONAL DETAILS START HERE -->
<div class="modal fade" id="personal-details" role="dialog">
    <div class="modal-dialog">        
      <!-- Modal content-->
      <div class="modal-content">           
        <div class="modal-body">             
            <app-userdetails></app-userdetails> 
        </div>
      </div>
    </div>
  </div>
<!-- POPUP PERSONAL DETAILS END HERE -->

选择器是<app-userdetails></app-userdetails>从另一个组件（用户详细信息组件）获取的。

这是我的HTML设计结构。这样，模态弹出窗口显示的内容相同。现在，我想使用来自DB的实时数据来自定义此部分。如果是这样，如何将用户ID传递给另一个组件。

请帮我解决这个问题

Answer 1

我强烈建议查看 [ng-bootstrap][1] 库来了解他们的模型。这样做的直接好处是它消除了应用程序对 jQuery 的依赖，这在 Angular 中使用可能会很痛苦（根据我的经验）！

使用 ng-bootstrap 库，您将传入任意数量的输入参数

const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.user = myUserObject;
modalRef.componentInstance.title = 'My First ng-bootstrap Model';

综上所述，我建议如下：

1. 创建一个与数据库通信的服务，包含获取所有用户名、ID 等（显示屏幕的高级信息）的方法。
2. 在第一个屏幕上调用上面的服务来获取所需的高级信息并呈现给用户。（如果可能的话，尝试使用可观察量和异步管道，Todd Moto 在这方面有一个很棒的[教程][2]）
3. 当用户单击某个 id 时，再次使用该服务，但这次传入用户的 id 并返回一个用户对象，该对象又可以传递给模型并根据您的意愿进行渲染:)

我希望这能回答您的问题，如果没有，请告诉我。亚当

[1]：！）https://ng-bootstrap.github.io/#/components/modal/examples

[2]:!) https://toddmotto.com/angular-ngif-async-pipe