logo标签列表

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

typescriptangular6
5

在我的项目中，我有一个包含约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设计结构。通过这种方式，模态弹出窗口会显示相同的内容。现在我想使用来自数据库的实时数据来自定义此部分。如果要这样做，如何将用户ID传递给另一个组件。

请帮我解决这个问题。

请问你能否创建工作模型？ - Iswar
3个回答
4
我强烈建议查看[ng-bootstrap][1]库，以了解它们的模型。这样做的直接好处是可以从应用程序中删除对jQuery的依赖，在Angular中使用jQuery可能会很麻烦（根据我的经验）！
使用ng-bootstrap库，您可以传入任意数量的输入参数。
const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.user = myUserObject;
modalRef.componentInstance.title = 'My First ng-bootstrap Model';

将所有内容综合起来，我建议如下：
  1. 创建一个服务与数据库通信，包含一个获取所有用户名、ID等高级信息以显示在屏幕上的方法。
  2. 在你的第一个屏幕上调用上述服务以获取所需的高级信息并呈现给用户。（如果可能，请尝试使用observables和async pipe，Todd Moto有一个很棒的教程[2]）
  3. 当用户点击一个ID时，再次使用该服务，但这次传入用户的ID，并返回一个用户对象，可以将其传递给模型并按您希望的方式呈现 :)
希望这回答了你的问题，如果没有，请告诉我。 Adam
[1]:!) https://ng-bootstrap.github.io/#/components/modal/examples [2]:!) https://toddmotto.com/angular-ngif-async-pipe
我一直在我的Angular项目中使用带有CDN链接的Bootstrap .js和.css。这帮助我更好地使用“Angular”。谢谢。 - lazyList
0
-6
据我所知，如果您在单击用户列表时调用服务器进行加载，将需要时间来加载用户详细数据。我更喜欢一次性获取所有详细信息，并使用HTML 5的数据属性，使用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中找到。希望这能帮到你。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接