Jak sprawdzić, czy istnieje zawartość ng

Załóżmy, że mam prosty komponent panelu Bootstrap z wieloma gniazdami transclusion. Przykładowy szablon:Jak sprawdzić, czy istnieje zawartość ng

<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <ng-content select="my-panel-heading"></ng-content> 
    </div> 
    <div class="panel-body"> 
    <ng-content select="my-panel-content"></ng-content> 
    </div> 
</div>

Chcę, aby nagłówek panelu był opcjonalny. Jak ukryć <div class="panel-heading"> elementu, jeśli nie ma treści dostarczone przez <ng-content select="my-panel-heading"></ng-content>

Źródło

2016-08-01 hendrix

'ngIf' powinno być preferowane zamiast' [ukryte] '. Czy istnieje powód, dla którego wolisz "ukryty"? –

@ GünterZöchbauer, jeśli zmienna showHeading została zainicjowana na wartość false, element jest usuwany z szablonu przed wywołaniem ngAfterContentInit, co powoduje, że odwołanie do viewChild jest niezdefiniowane. Jeśli preferowana jest opcja ngIf, możesz zmienić domyślną wartość parametru showHeading na wartość true, która powinna działać. – hendrix

Właściwie to po prostu przetestowałem i nie działało dobrze z * ngIf nawet po zmianie wartości domyślnej na true. Odniesienie do #panelHeading było wciąż niezdefiniowane, ponieważ * ngIf usunął je. – hendrix

Jeśli masz elementu nadrzędnego <ng-content> z szablonu zmiennej (#panelHeading)

<div class="panel panel-default"> 
    <div class="panel-heading" #panelHeading [hidden]="!showHeading"> 
    <ng-content select="my-panel-heading"></ng-content> 
    </div> 
    <div class="panel-body"> 
    <ng-content select="my-panel-content"></ng-content> 
    </div> 
</div>

następnie można wyszukać dla niego jak

@ViewChild('panelHeading') panelHeading;

i ustawić właściwość w zależności od tego, czy są dzieci lub nie

constructor(private cdRef:ChangeDetectorRef) {} 

showHeading:boolean = false; 

ngAfterViewInit() { 
    this.showHeading = this.panelHeading.nativeElement && this.panelHeading.nativeElement.children.length > 0; 
    this.cdRef.detectChanges(); 
}

Jeśli <my-panel-heading> jest komponentem Angular2, a następnie można również użyć

@ContentChild(MyPanelHeading) panelHeading:MyPanelHeading; 

constructor(private cdRef:ChangeDetectorRef) {} 

showHeading:boolean = false; 

ngAfterViewInit() { 
    this.showHeading = this.panelHeading != null; 
    this.cdRef.detectChanges(); 
}

Źródło

2016-08-01 07:16:43

Po ustawieniu domyślnej wartości showHeading na "false", this.panelHeading ma wartość "undefined". Ustawiając domyślną wartość showHeading na "true", działa poprawnie, ale otrzymuję "ExpressionChangedAfterItHasBeenCheckedError" w konsoli. Co więcej, muszę użyć "ngAfterViewInit" zamiast "ngAfterContentInit", w przeciwnym razie showHeading jest zawsze niezdefiniowany. Wszelkie pomysły, jak rozwiązać? Thx –

@ Luca, dzięki za informację zwrotną. Zaktualizowałem swoją odpowiedź. Myślę, że teraz 'ngAfterViewInit' jest poprawny. Zaktualizowałem jeszcze kilka rzeczy, które powinny rozwiązać problemy, o których wspomniałeś. –

dziękuję! Dla mojego rozwiązania wolałem używać '* ngIf' zamiast' hidden ', ustawiając domyślną wartość 'showHeading' na true. Teraz wszystko działa poprawnie :) –

Trzeba by usunąć wszystkie spacje, ale można to zrobić z CSS, jeśli naprawdę troszczył się o nią (ng-content robi” t zajmują miejsce):

.panel-heading:empty { display: none } 

<div class="panel-heading"><ng-content select="my-panel-heading"></ng-content></div>

Źródło

2017-09-29 21:17:54

Jak sprawdzić, czy istnieje zawartość ng

Odpowiedz

Powiązane problemy