Я использую Материал 2 для добавления md-raised-button
. Я хочу применить эту директиву, только если определенное условие будет выполнено.
Например:
<button md-raised-button="true"></button>
Другой пример: я создал базовую динамическую реактивную форму в plunker. Я использую formArrayName
директиву реактивной формы для массива элементов управления. Я хочу применить formArrayName
директиву, только если определенное условие станет истинным, в противном случае не добавляйте formArrayName
директиву.
Ответы:
Я не знаю, можно ли применять директивы в зависимости от условия, но обходной путь состоит в том, чтобы иметь 2 кнопки и отображать их в зависимости от условия .
Изменить: возможно, это будет полезно.
источник
formGroup
в дочерний компонент, который является оболочкой,input
поскольку вы можете просто передать свойformControl
как@Input() control: FormControl
внутренний компонент оболочки и применить его к родномуinput
через[formControl]="control"
Если вам просто нужно добавить атрибут для запуска правил CSS, вы можете использовать следующий метод: (это не создает / уничтожает директиву динамически)
<button [attr.md-raised-button]="condition ? '' : null"></button>
То же самое применимо и к плунжеру: вилка
Обновить:
Как
condition ? '' : null
работает значение:Когда это пустая строка (
''
), она становитсяattr.md-raised-button=""
, когда ееnull
атрибут не существует.Обновление: обновление plunker: fork (проблемы с версией исправлены, обратите внимание, что вопрос изначально был основан на angular 4)
источник
Как уже отмечалось, это невозможно. Одна вещь, которую можно использовать, по крайней мере, для предотвращения дублирования
ng-template
. Это позволяет извлекать содержимое элемента, затронутогоngIf
ветвлением.Если вы, например, хотите создать компонент иерархического меню с использованием Angular Material:
Здесь условно применяется директива
matMenuTriggerFor
, которая должна применяться только к пунктам меню с дочерними элементами. Содержимое кнопки вставляется в оба места черезngTemplateOutlet
.источник
Это может произойти поздно, но это жизнеспособный и элегантный метод условного применения директивы.
В классе директивы создайте входную переменную:
При применении директивы установите свойство apply входной переменной:
В методе директивы проверьте переменную this.options.apply и примените логику директивы на основе условия:
источник
Как утверждали другие,
directives
не может применяться динамически.Однако, если вы просто хотите переключить
md-button
стиль с плоского на приподнятый , тогда этотсделает свое дело. Plunker
источник
Это тоже может быть решением:
[md-raised-button]="condition ? 'true' : ''"
Он работает для angular 4, ionic 3 следующим образом:
[color]="condition ? 'primary' : ''"
гдеcondition
- функция, которая решает, активна это страница или нет. Весь код выглядит так:<button *ngFor="let page of ..." [color]="isActivePage(page) ? 'primary' : ''">{{ page.title }}</button>
источник
В настоящее время существует
NO
способ условно применить директиву к компоненту. Это не поддерживается. Компоненты, которые вы создали, могут быть добавлены или удалены условно.Уже существует проблема, созданная для того же самого
angular2
, так что это также должно быть в случае с angular4.В качестве альтернативы вы можете выбрать вариант с ng-if
источник
Мне не удалось найти хорошее существующее решение, поэтому я создал свою собственную директиву, которая делает это.
Тогда ваш html:
<div dynamic-attr="{{hasMargin: 'margin-left' ? ''}}"></div>
источник
@HostBinding('attr.dynamic-attr') @Input('dynamic-attr') attr: string;
вместо ngOnInit + ElementRef.Может кому поможет.
В приведенном ниже примере у меня есть директива,
my-button.component.html
и я хочу применить*appHasPermission
ее<button>
только в том случае, еслиrole
атрибут установлен.Таким образом вы не дублируете
<button>
код.источник
Да, это возможно.
html с директивой appActiveAhover :)
директива
источник
Переход
null
к директиве удаляет его!источник
Использовать
NgClass
пример истинного состояния:
или логическая функция
полный пример:
Если вам нужен класс по умолчанию:
источник
md-raised-button
атрибут как false)У меня появилась другая идея о том, что вы могли бы сделать.
Вы можете сохранить HTML-код, который хотите заменить, в переменной в виде строки, а затем добавить / удалить из него директиву
bypassSecurityTrustHtml
по своему усмотрению, используя метод DomSanitizer .Я не привел к чистому решению, но, по крайней мере, вам не нужно повторять код.
источник
По состоянию на 18 января 2019 года я добавил условную директиву в Angular 5 и выше. Мне нужно было изменить цвет
<app-nav>
компонента на основеdarkMode
. Была ли страница в темном режиме или нет.Это сработало для меня:
<app-nav [color]="darkMode ? 'orange':'green'"></app-nav>
Я надеюсь, что это поможет кому-то.
РЕДАКТИРОВАТЬ
Это изменяет значение атрибута (цвета) в зависимости от условия. Так уж получилось, что цвет определяется с помощью директивы. Итак, любой, кто читает это, пожалуйста, не запутайтесь, это не применяет директиву условно (т.е. что означает добавление или удаление директивы в dom на основе условия)
источник