Question

我有一个自定义组件，可用于编辑用户。它显示一个对话框，可以向现有用户提供该对话框。或不。它具有标记：

和控制器：

// Remove trailing and leading white space characters.
String sqlString = sqlBuffer.toString().trim();

// If the string isn't empty, then fire it.
if ((! sqlString.equals("")) && (! sqlString.startsWith("#"))) {

然后在用户列表页面中使用该组件，该组件一旦位于列表顶部即可添加带有标记的新用户：

<button mat-button (click)="openUserDialog()">Edit</button>

，然后在列表的每一行上使用标记来编辑用户：

@Component({
  selector: 'app-user-edit',
  templateUrl: './user-edit.component.html',
})
export class UserEditComponent implements OnChanges {

  @Input() existingUser: User;
  @Output() userEditedEvent: EventEmitter<User> = new EventEmitter<User>();

  userDialogRef: MatDialogRef<UserDialogComponent>;

  constructor(
    private matDialog: MatDialog,
    private userService: UserService
  ) { }

  ngOnChanges() {
  }

  openUserDialog() {
    this.userDialogRef = this.matDialog.open(UserDialogComponent, {
      hasBackdrop: false,
      data: {
        user: this.existingUser
      }
    });

    this.userDialogRef
      .afterClosed()
      .subscribe(user => {
        // TODO validate the edited user
        if (user) {
          if (this.existingUser) {
            user.id = this.existingUser.id;
            this.userService.fullUpdate(user)
              .subscribe(updatedUser => {
                this.userEditedEvent.emit(updatedUser);
                // TODO Add a hint that the user has been added
              });
          } else {
            this.userService.add(user)
              .subscribe(addedUser => {
                this.userEditedEvent.emit(addedUser);
                // TODO Add a hint that the user has been updated
              });
          }
        }
      });
  }

}

麻烦之处在于该视图同时显示“编辑”标签以添加和编辑用户。

如何在列表顶部添加自定义的“添加”标签，并为每个用户添加另一个“更新”标签？

我觉得我可能对整个过程进行了过度设计。

Answer 1

您可以添加另一个@Input参数，例如 label ，并从标记中传递标签的值。

export class UserEditComponent implements OnChanges {

  @Input() existingUser: User;
  @Input() label: string = "Edit" // set default to EDIT. If preferred can initialised to empty.

标记为添加：

<app-user-edit (userEditedEvent)="refreshList($event)" label="ADD"></app-user-edit>

标记为编辑：

<app-user-edit [existingUser]="user" (userEditedEvent)="refreshList($event)" label="EDIT"></app-user-edit>

此外，在需要显示参数的视图中绑定参数标签。

如何将数据传递到自定义组件的标记？

1 个答案: