typescript 带有动态内容的 angular 6 模态弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51490317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular 6 modal popup with dynamic content
提问by Sam Hanson
In my project, I have a user list of around 50 users. By clicking each username, the corresponding user's info should display in the modal popup.
在我的项目中，我有一个大约 50 个用户的用户列表。通过单击每个用户名，相应用户的信息应显示在模态弹出窗口中。
I don't know how to load the content by Id inside the popup in my code.
我不知道如何在我的代码的弹出窗口中通过 Id 加载内容。
I have 2 components. Userlist and user details.
我有 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 -->
The selector <app-userdetails></app-userdetails>fetched from another component(user details component).
<app-userdetails></app-userdetails>从另一个组件（用户详细信息组件）获取的选择器。
This is my HTML Design structure. By this way, the modal popup displayed with the same content. Now I want to customize this section with my real-time data from DB. If so how to pass the user id to another component.
这是我的 HTML 设计结构。通过这种方式，模态弹出窗口显示的内容相同。现在我想使用来自 DB 的实时数据自定义此部分。如果是这样，如何将用户 ID 传递给另一个组件。
Please help me to fix this
请帮我解决这个问题
回答by adamturner
I would strongly recommend looking at the [ng-bootstrap][1] library for their model. The immediate benefite to this is it removes the dependency on jQuery from your app, which can be a pain to use within Angular (in my experience)!
我强烈建议查看他们模型的 [ng-bootstrap][1] 库。这样做的直接好处是它从您的应用程序中删除了对 jQuery 的依赖，这在 Angular 中使用起来可能很痛苦（根据我的经验）！
Using the ng-bootstrap library, you will pass in as many input parameters as you want
使用 ng-bootstrap 库，您可以传入任意数量的输入参数
const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.user = myUserObject;
modalRef.componentInstance.title = 'My First ng-bootstrap Model';
Bringing this all together, I would be suggest the following:
综上所述，我建议如下：
- Create a service which communicates with the database, containing a method to get all usernames, ids etc (high level info to display the screen).
- On your first screen call the service above to obtain the high level information needed and render for the user. (Try and work with observables and the async pipe if possible, Todd Moto has a great [tutorial][2] on this)
- When a user clicks on an id, use the service again, but this time passing in the user's id and get back a user object which in turn can be passed to the Model and rendered however you wish :)
- 创建与数据库通信的服务，其中包含获取所有用户名、ID 等（显示屏幕的高级信息）的方法。
- 在您的第一个屏幕上调用上面的服务以获取所需的高级信息并为用户呈现。（如果可能，尝试使用 observables 和异步管道，Todd Moto 在这方面有一个很棒的 [教程][2]）
- 当用户点击一个 id 时，再次使用该服务，但这次传入用户的 id 并取回一个用户对象，该对象又可以传递给模型并按照您的意愿呈现:)
I hope this answers your question, let me know if not. Adam
我希望这能回答你的问题，如果没有，请告诉我。亚当
[1]:!) https://ng-bootstrap.github.io/#/components/modal/examples
[1]:!) https://ng-bootstrap.github.io/#/components/modal/examples
回答by Vijay Chauhan
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
https://stackblitz.com/edit/angular-iybx4hangular6-custom-popup
回答by Iswar
As far as I know, if you call server for loading while clicking on the user list, will take time to load your user detail data. What I prefer to do is to fetch all the detail in one go, and using data attribute of HTML 5 you can show that in modal popup using jQuery.
据我所知，如果您在单击用户列表时调用服务器进行加载，则加载您的用户详细数据需要一些时间。我更喜欢做的是一次性获取所有细节，并使用 HTML 5 的 data 属性，您可以使用 jQuery 在模态弹出窗口中显示它。
I did noting much, I have created data-attribute of html like this:
我没有注意到很多，我已经像这样创建了 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="[email protected]"
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="[email protected]"
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>
Inside the modal-bodyin the modal popup do like this:
在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>
And In the Jquery just push your clicked user list to popup like this:
在 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'));
});
The working modal can be found in jsFiddle. Hope this helps you.
工作模式可以在jsFiddle 中找到。希望这对你有帮助。
