Question

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

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

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

var user: Contact? {
    if let contactData = UserDefaults.standard.data(forKey: Constants.UserDefaultsKey.currentUser),
        let contact = try? JSONDecoder().decode(Contact.self, from: contactData) {
        return contact
    }
    return nil
}

选择器<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>...  <div class="modal fade" id="personal-details" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-body"> <app-userdetails></app-userdetails> </div> </div> </div> </div> 从另一个组件（用户详细信息组件）获取。

这是我的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';

将所有这些放在一起，我建议以下内容：

创建一个与数据库通信的服务，其中包含一种获取所有用户名，id等（用于显示屏幕的高级信息）的方法。
在您的第一个屏幕上，调用上述服务以获得所需的高级信息并为用户渲染。（尝试使用Observable和异步管道，如果可能的话，Todd Moto对此有很好的[tutorial] [2]）
当用户单击ID时，再次使用该服务，但这一次传入用户ID并返回一个用户对象，该对象又可以传递给模型并按您的意愿进行呈现：）

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

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

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

Answer 2

 The working Modal with content .I hope this is very helpful

 Angular 6 Modal Directive Component. The custom modal directive is used for 
 adding  modals anywhere in your angular application.

https://stackblitz.com/edit/angular-iybx4hangular6-custom-popup

Answer 3

据我所知，如果您在单击用户列表时调用服务器进行加载，则将花费一些时间来加载用户详细数据。我更喜欢做的是一次性获取所有细节，并使用HTML 5的data属性可以使用jQuery在模式弹出窗口中显示该细节。

我不太注意，我已经创建了html的数据属性，如下所示：

<ul>
  <li>
     <a href="javascript:void()" class="ShowModel" 
        data-user-name="John Doe1"
        data-user-profile-url="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAASrSURBVGhD7ZhtbFNVGMcLgSjCB2PCFzXGRMbijEHcCIspvX27MLp2azdYDDBRhjNzGBNDJCKuMcZEDVGjRFbmW1BTcJPNrfd2YLSRRCA6TUSJEqfRRIfDSNgcY2/cx+e5nFvb29Pt7qW3xfSf/NKTc57zP//nvn2oJa+88sorL7fbfZvT6XwcCTkcjk7kEw1cs7Ky3BUGL0K6EQUBHthMjJXnpjBgAwYd1wfngbX78VcMBoPz2fbckMvlekIf1gjY0Dd2u301s8muMNAaDDShD2kU3HsJf0Vmlx0JgrAAg/ysDzdd0KPfarUuZbbmCwPU8IKlY63ogl11IjRsEnnrzzFb84WHf6oLk4IWXn5pPQwc8QJEfTDU4YXHalOa+ZXZmqvS0tJFTodjVBdGhRdeDzWzY4s7aR8+qrcze/OEj9V9iSFEtxOe3DZ5eD36ZvALto7ZmydspIoO3xxwgfSi8fB6qJm6mqvNoGctszdPeOjDdPjzO9ZyA04H8mCNNDB780SH/i8aEUVn41w3IjrtjczeHMGHRUv+CBV9X7dRSGlkqH09jHelf1/GIuVqTeIcedTXCHDuwJ2nyZsdk3kph5Y9BOHlcClcAkf3/hdqoLUM9nhuhpbthUlBEzmAa894boHBtnXxOfIYPrQKyBPCBQ+yYzIvJby8Uj30o5KkkCMfe+D1B+4AaffKpPlEIk/do9aMdHqS18gLPZUPlvnYMZkXgGWeEi54RWkrvpAUZhYobff+jZ4vkzc7xjwpsncVL9RMUKSKEmZrvhS57Dol6hvgBZsWsvci9NQvZLbZkRL1vscNNw0U2XeQ2WVPSrSiEIOM8wIaAR/PMeVYeQGzy64wTBMvpBHwju5hNtmX+hWTfW/zgk6GuicbX6nJpDbTYW0GuZwbOgnZA0q7dX/ONaEJQhYrvLkIoPVugIiY2gDN0RrVYC3blntSG2nGm6MyD+CtxQDv3nQVGtOctn7tNDIFudhIcX3PwjUByblp6/uvXvmy6TJIZXgXlqaGpzlcoxqqpT2CEFvAbLInobL9RiEgPSv4I334C8QXx3/sBU3//AYjn4dUaKyJarR6m1/63eaPNJEXszVRweB8WyDyqC0g/aUF0rj/kc9Osrww0tsLPzgcKjTWRDX6fXgxztv88jZ8QM35kgkbY0uwgY6UIAxscPxc/3AfKAr8VF0N361YoUJjmqM1quHtJfDutIri0cXsuMxICMi3CoHIaV6ARHa/0BOjKz985ky8ERqTaI23Jwm/9LV1g5yZv1DpKhlpgrBXSX+Ojk2MXj57Nt4IjWmO1nh79OBdPyVsjV3Pjp874Uv5Gu/AdBzu+uXExe7ueCM0pjlebVr8kb3s+LmRozp6F97uK9zD0uCtPfbt+ZaWeCM0pjlebTrw4k04KqKFLMbshYYHeQdNxfHGpkGtERrzaqYCH7F3WIzZqdjbeQN+ZYZ4h0zFzg1v9GmN0JhXY4DBOXlX8IqIHHND2P1dw1+tXA0EjXk1RrBXyi4WZ+ayBbp28cyNsq/y6QGCt2acyE4WZ+bCL8c+vrkxyquO9BO8NaPQF5PFmbnQKIRcyCp+qZnFyesakcXyLxOQnNN132H4AAAAAElFTkSuQmCC"
        data-user-email="dummy@dummy.co.in"
        data-user-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel vehicula erat. Phasellus vestibulum leo eu mi tempor blandit. Suspendisse eget iaculis lectus. Donec vitae tempus enim, quis tristique magna. Donec lobortis, sem ac pretium viverra, leo nisl consequat arcu, sit amet ullamcorper nunc turpis ac erat. In rutrum auctor ligula, quis mattis enim lacinia eu. Aliquam at magna a erat laoreet iaculis quis a justo. Donec porttitor vulputate massa, nec suscipit nisi mollis sed."
        data-toggle="modal" 
        data-target="#myModal">user 1</a>
   </li>
   <li>
     <a href="javascript:void()" class="ShowModel" 
        data-user-name="John Doe"
        data-user-profile-url="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAASrSURBVGhD7ZhtbFNVGMcLgSjCB2PCFzXGRMbijEHcCIspvX27MLp2azdYDDBRhjNzGBNDJCKuMcZEDVGjRFbmW1BTcJPNrfd2YLSRRCA6TUSJEqfRRIfDSNgcY2/cx+e5nFvb29Pt7qW3xfSf/NKTc57zP//nvn2oJa+88sorL7fbfZvT6XwcCTkcjk7kEw1cs7Ky3BUGL0K6EQUBHthMjJXnpjBgAwYd1wfngbX78VcMBoPz2fbckMvlekIf1gjY0Dd2u301s8muMNAaDDShD2kU3HsJf0Vmlx0JgrAAg/ysDzdd0KPfarUuZbbmCwPU8IKlY63ogl11IjRsEnnrzzFb84WHf6oLk4IWXn5pPQwc8QJEfTDU4YXHalOa+ZXZmqvS0tJFTodjVBdGhRdeDzWzY4s7aR8+qrcze/OEj9V9iSFEtxOe3DZ5eD36ZvALto7ZmydspIoO3xxwgfSi8fB6qJm6mqvNoGctszdPeOjDdPjzO9ZyA04H8mCNNDB780SH/i8aEUVn41w3IjrtjczeHMGHRUv+CBV9X7dRSGlkqH09jHelf1/GIuVqTeIcedTXCHDuwJ2nyZsdk3kph5Y9BOHlcClcAkf3/hdqoLUM9nhuhpbthUlBEzmAa894boHBtnXxOfIYPrQKyBPCBQ+yYzIvJby8Uj30o5KkkCMfe+D1B+4AaffKpPlEIk/do9aMdHqS18gLPZUPlvnYMZkXgGWeEi54RWkrvpAUZhYobff+jZ4vkzc7xjwpsncVL9RMUKSKEmZrvhS57Dol6hvgBZsWsvci9NQvZLbZkRL1vscNNw0U2XeQ2WVPSrSiEIOM8wIaAR/PMeVYeQGzy64wTBMvpBHwju5hNtmX+hWTfW/zgk6GuicbX6nJpDbTYW0GuZwbOgnZA0q7dX/ONaEJQhYrvLkIoPVugIiY2gDN0RrVYC3blntSG2nGm6MyD+CtxQDv3nQVGtOctn7tNDIFudhIcX3PwjUByblp6/uvXvmy6TJIZXgXlqaGpzlcoxqqpT2CEFvAbLInobL9RiEgPSv4I334C8QXx3/sBU3//AYjn4dUaKyJarR6m1/63eaPNJEXszVRweB8WyDyqC0g/aUF0rj/kc9Osrww0tsLPzgcKjTWRDX6fXgxztv88jZ8QM35kgkbY0uwgY6UIAxscPxc/3AfKAr8VF0N361YoUJjmqM1quHtJfDutIri0cXsuMxICMi3CoHIaV6ARHa/0BOjKz985ky8ERqTaI23Jwm/9LV1g5yZv1DpKhlpgrBXSX+Ojk2MXj57Nt4IjWmO1nh79OBdPyVsjV3Pjp874Uv5Gu/AdBzu+uXExe7ueCM0pjlebVr8kb3s+LmRozp6F97uK9zD0uCtPfbt+ZaWeCM0pjlebTrw4k04KqKFLMbshYYHeQdNxfHGpkGtERrzaqYCH7F3WIzZqdjbeQN+ZYZ4h0zFzg1v9GmN0JhXY4DBOXlX8IqIHHND2P1dw1+tXA0EjXk1RrBXyi4WZ+ayBbp28cyNsq/y6QGCt2acyE4WZ+bCL8c+vrkxyquO9BO8NaPQF5PFmbnQKIRcyCp+qZnFyesakcXyLxOQnNN132H4AAAAAElFTkSuQmCC"
        data-user-email="dummy@dummy.co.in"
        data-user-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel vehicula erat. Phasellus vestibulum leo eu mi tempor blandit."
        data-toggle="modal" 
        data-target="#myModal">user 2</a>
    </li>...
 </ul>

在模式弹出窗口的modal-body内执行以下操作：

        <div class="modal-body">
            <div class="row">
              <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                  <img id="UserProfilePic" src="..." alt="...">
                  <div class="caption">
                    <h3 id="UserName"></h3>
                    <h3 id="UserEmail"></h3>
                    <p id="UserDescription"></p>                       
                  </div>
                </div>
              </div>                
            </div>
        </div>

然后在Jquery中，将您单击的用户列表按如下所示弹出：

 $('.ShowModel').click(function () {
    $("#UserProfilePic").attr("src", $(this).attr('data-user-profile-url'));
    $("#UserName").text($(this).attr('data-user-name'));
    $("#UserEmail").text( $(this).attr('data-user-email')); 
    $("#UserDescription").text( $(this).attr('data-user-description'));
 });

工作模式可以在jsFiddle中找到。希望对您有帮助。

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

3 个答案: