Do dodania używam materiału 2 md-raised-button
. Chcę stosować tę dyrektywę tylko wtedy, gdy spełnią się określone warunki.
Na przykład:
<button md-raised-button="true"></button>
Inny przykład: stworzyłem podstawową dynamiczną formę reaktywną w plunkerze. Używam formArrayName
dyrektywy formy reaktywnej dla tablicy kontrolek. Chcę zastosować formArrayName
dyrektywę tylko wtedy, gdy określony warunek stanie się prawdziwy, w przeciwnym razie nie dodawaj formArrayName
dyrektywy.
Oto link do plunkera .
Odpowiedzi:
Nie wiem, czy można zastosować dyrektywy na podstawie warunku, ale obejściem byłoby posiadanie 2 przycisków i wyświetlanie ich na podstawie warunku .
Edycja: może to będzie pomocne.
źródło
formGroup
do komponentu podrzędnego, który zawija się,input
ponieważ możesz po prostu przekazać goformControl
jako@Input() control: FormControl
komponent wewnątrz opakowania i zastosować go do natywnegoinput
za pośrednictwem[formControl]="control"
Jeśli potrzebujesz tylko dodać atrybut, aby wywołać reguły CSS, możesz użyć poniższej metody: (nie powoduje to dynamicznego tworzenia / niszczenia dyrektywy)
<button [attr.md-raised-button]="condition ? '' : null"></button>
Zastosowałem to samo do twojego plunkera: widelec
Aktualizacja:
Jak
condition ? '' : null
działa jako wartość:Kiedy jest pustym ciągiem (
''
), staje sięattr.md-raised-button=""
, gdy jegonull
atrybut nie będzie istniał.Aktualizacja: aktualizacja plunkera: widelec (naprawiono problemy z wersją, proszę zauważyć, że pierwotnie pytanie było oparte na angular 4)
źródło
Jak już wspomniano, nie wydaje się to możliwe. Jedną z rzeczy, które można wykorzystać, aby przynajmniej zapobiec jakimś duplikacjom, jest
ng-template
. Pozwala to na wyodrębnienie zawartości elementu, na który ma wpływngIf
rozgałęzienie.Jeśli na przykład chcesz utworzyć hierarchiczny komponent menu przy użyciu materiału kątowego:
Tutaj jest stosowana warunkowo dyrektywa
matMenuTriggerFor
, która powinna być stosowana tylko do pozycji menu z dziećmi. Zawartość przycisku jest wstawiana w obu miejscach za pomocąngTemplateOutlet
.źródło
Może to nastąpić późno, ale jest to realna i elegancka metoda warunkowego stosowania dyrektywy.
W klasie dyrektywy utwórz zmienną wejściową:
Stosując dyrektywę, ustaw właściwość apply zmiennej wejściowej:
W metodzie dyrektywy sprawdź zmienną this.options.apply i zastosuj logikę dyrektywy na podstawie warunku:
źródło
Jak stwierdzili inni,
directives
nie można go stosować dynamicznie.Jeśli jednak chcesz po prostu zmienić
md-button
styl z płaskiego na podniesiony , tozałatwi sprawę. Plunker
źródło
To też może być rozwiązanie:
[md-raised-button]="condition ? 'true' : ''"
Działa dla Angular 4, ionic 3 w ten sposób:
[color]="condition ? 'primary' : ''"
gdziecondition
jest funkcją, która decyduje, czy jest to aktywna strona, czy nie. Cały kod wygląda następująco:<button *ngFor="let page of ..." [color]="isActivePage(page) ? 'primary' : ''">{{ page.title }}</button>
źródło
Obecnie istnieje
NO
sposób na warunkowe zastosowanie dyrektywy do komponentu, ale nie jest to obsługiwane. Utworzone komponenty można warunkowo dodawać lub usuwać.Jest już utworzony problem dla tego samego z
angular2
, więc powinno być również w przypadku angular4.Alternatywnie możesz wybrać opcję z ng-if
źródło
Nie mogłem znaleźć fajnego istniejącego rozwiązania, więc zbudowałem własną dyrektywę, która to robi.
Następnie Twój html:
<div dynamic-attr="{{hasMargin: 'margin-left' ? ''}}"></div>
źródło
@HostBinding('attr.dynamic-attr') @Input('dynamic-attr') attr: string;
zamiast ngOnInit + ElementRef.Może to komuś pomoże.
W poniższym przykładzie mam
my-button.component.html
i chcę zastosować*appHasPermission
dyrektywę<button>
tylko wtedy, gdyrole
atrybut jest ustawiony.W ten sposób nie duplikujesz
<button>
kodu.źródło
tak to mozliwe.
strona html z dyrektywą appActiveAhover :)
dyrektywa
źródło
Przejście
null
do dyrektywy usuwa ją!źródło
Posługiwać się
NgClass
przykład prawdziwego stanu:
lub funkcja boolowska
pełny przykład:
Jeśli chcesz mieć klasę domyślną:
źródło
md-raised-button
atrybutu jako fałsz)Mam inny pomysł na to, co możesz zrobić.
Możesz zapisać kod HTML, który chcesz zastąpić, w zmiennej jako ciąg, a następnie dodać / usunąć z niego dyrektywę, jak chcesz, używając
bypassSecurityTrustHtml
metody DomSanitizer .Nie daje to czystego rozwiązania, ale przynajmniej nie musisz powtarzać kodu.
źródło
Na dzień 18 stycznia 2019 r. W ten sposób warunkowo dodałem dyrektywę w Angular 5 i nowszych. Musiałem zmienić kolor
<app-nav>
komponentu na podstawiedarkMode
. Czy strona była w trybie ciemnym, czy nie.To zadziałało dla mnie:
<app-nav [color]="darkMode ? 'orange':'green'"></app-nav>
Mam nadzieję, że to komuś pomoże.
EDYTOWAĆ
Spowoduje to zmianę wartości atrybutu (koloru) na podstawie warunku. Po prostu zdarza się, że kolor jest definiowany za pomocą dyrektywy. Więc każdy, kto to czyta, nie daj się zmylić, to nie jest warunkowe stosowanie dyrektywy (tj. Co oznacza dodanie lub usunięcie dyrektywy do domeny na podstawie warunku)
źródło