Как передать данные в разметку пользовательского компонента?

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.

Разметка для ADD:

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

Разметка для РЕДАКТИРОВАНИЯ:

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

Кроме того, свяжите метку параметра в том месте, где она должна отображаться.