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

Question

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

<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
              });
          }
        }
      });
  }

}

然后在用户列表页面中使用该组件，一旦在列表顶部添加新用户，标记为：

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

并在列表的每一行上使用标记编辑用户：

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

问题是视图显示编辑标签来添加和编辑用户。

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

我觉得我可能过度设计了整件事。

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>

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

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

How to pass data to the markup of a custom component?

angular7