Блог

Главная - Вопросы по программированию - использование @Input для отключения / включения кнопки

использование @Input для отключения / включения кнопки

#angular

#angular

Вопрос:

я хочу изменить статус включения / выключения для кнопки, которая является частью моего пользовательского шаблона компонента. это должно быть сделано с помощью @Input, и пользователь должен иметь возможность это делать:

 <custom-component>
      [disabled]="true"
      [x]="false"
      [y]="false"
</custom-component>

Я поставил
@Input('disabled') public _disabled: boolean;
в моем пользовательском компоненте
, а также я включил
[disabled]=_disabled свою кнопку, которая находится в моем шаблоне пользовательского компонента.
проблема в том, что описанный выше метод не работает, и изменение атрибута [disabled] не позволяет включить / отключить кнопку.

https://stackblitz.com/edit/angular-ndyl14?embed=1amp;file=src/index.html

Комментарии:

1. В чем проблема?

2. Я не могу найти кнопку в вашем пользовательском компоненте

3. Что вы подразумеваете под «не работает»? Можете ли вы быть более конкретными

4. Просто не делайте этого в корневом компоненте, и он будет работать нормально. stackblitz.com/edit /…

5. пожалуйста, ознакомьтесь с документацией angular. angular.io/guide/component-interaction

Ответ №1:

Я думаю, что приведенный ниже код также может быть полезен, но он все еще не работает

 constructor(public elementRef: ElementRef) {
    var native = this.elementRef.nativeElement;
    var myattr = native.getAttribute("myattr");
}

Ответ №2:

Что вы могли бы сделать, так это передать компоненту статус [disabled] как Input() и проверить это свойство в кнопке для изменения. Если вы хотите изменить отключение кнопки, вам нужно использовать только [disable] свойство, а не [attr.disable]

Вы можете увидеть пример здесь:

https://stackblitz.com/edit/angular-stack-55673048?file=src/app/hello.component.ts