如何为 Angular 中的不同用户创建不同的模式？

Question

我正在尝试创建一个包含多个用户数据的应用程序。我必须为每个用户创建 6 个模式，他们可以从那里访问他们的数据。假设用户 1 有 6 个名为 - A B C D E F 的模态，则

点击 A，登录模式应打开。

点击 B，注册模式应该打开

所有这些模式对所有用户来说都是不同的。

我尝试为用户创建不同的方法，但这行不通。因为我必须为所有用户创建 6 种方法，模态模式也是如此。因此，对于 1 个用户，我将不得不创建 6 个模态，然后为第二个用户再创建 6 个模态，依此类推。

有更好的方法吗？

我创建了一个StackBlitz来展示我所做的

Answer 1

你可以试试下面的方法。

app.component.ts

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  displayModal = 'none';

  users = [
    {
      id: 'user1',
      name: 'User 1'
    },
    {
      id: 'user2',
      name: 'User 2'
    },
    {
      id: 'user3',
      name: 'User 3'
    },
    {
      id: 'user4',
      name: 'User 4'
    },
    {
      id: 'user5',
      name: 'User 5'
    },
    {
      id: 'user6',
      name: 'User 6'
    }
  ];

  modals = [
    {
      label: 'A',
      type: 'login'
    },
    {
      label: 'B',
      type: 'register'
    },
    {
      label: 'C',
      type: 'reset password'
    },
    {
      label: 'D',
      type: 'Forgot Password'
    },
    {
      label: 'E',
      type: 'Confirmation'
    },
    {
      label: 'F',
      type: 'Delete'
    }
  ];

  modalsForEachUser = 6;
  selectedUser;
  selectedModal;

  openModal(user, modal) {
    console.log(user);
    this.selectedUser = user;
    this.selectedModal = modal;
    this.displayModal = 'block';
  }

  onCloseHandled() {
    this.displayModal = 'none';
  }
}

app.component.html

<table>
  <tr *ngFor="let user of users">
    <td class="actions text-left">
      {{ user.name }}
    </td>
    <a *ngFor="let modal of modals" (click)="openModal(user, modal.type)" class="abcd">
      {{ modal.label }}
    </a>
  </tr>
</table>

<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display': displayModal}" *ngIf="selectedUser">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ selectedUser.name }} {{ selectedModal }}</h4>
        <button type="button" class="close" aria-label="Close" (click)="onCloseHandled()"><span aria-hidden="true">&times;</span></button>
      </div>
      <form id="login" method="post" autocomplete="off">
        <div class="modal-body">
          <div class="container-fluid">
            <div class="row m-b-20">
              <div class="col-md-4">
                <label class="deposite-user-first">{{ selectedUser.name }}</label>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">

          <button type="button" class="btn btn-back" data-dismiss="modal" (click)="onCloseHandled()"><i class="fas fa-undo"></i>Back</button>
          <button type="submit" class="btn btn-submit">submit<i class="fas fa-sign-in-alt"></i></button>
        </div>
      </form>
    </div>
  </div>
</div>

您可以在此处查看 working demo。

如果您有任何疑问，请告诉我。

Answer 2

据我了解，您应该为 'login' 和 'register' 等操作创建组件，确保它们有自己的业务，例如调用或验证的 API。

然后你可以将用户名等参数传递给这些组件。此外，您可以将模态功能放在这些组件中，或者将其保留在根组件中。

一般来说，您所做的并不是一个好的做法，请考虑重新设计您进入每个表单的方式。

提供示例代码： stackblitz

如何为 Angular 中的不同用户创建不同的模式？

How do I create different modals for different users in Angular?

angular

ngx-bootstrap-modal

ng-bootstrap-modal