angular - vs
ng-container er nevnt i den offisielle dokumentasjonen, men jeg prøver fortsatt å forstå hvordan det fungerer og hva bruksområdene er.
Det er spesielt nevnt i ngPlural og ngSwitch direktiver.
Gjør <ng-container> det samme som <template>, eller avhenger det av om en direktiv ble skrevet for å bruke en av dem?
Er
<ng-container *ngPluralCase="'=0'">there is nothing</ng-container>
og
<template [ngPluralCase]="'=0'">there is nothing</template>
skulle være den samme?
Hvordan velger vi en av dem?
Hvordan kan <ng-container> brukes i en egendefinert direktiv?
Svar #1
Rediger: Nå er det dokumentert
<ng-container>til unnsetningAngular
<ng-container>er et grupperingselement som ikke forstyrrer stiler eller oppsett fordi Angular ikke legger det i DOM-en.(...)
<ng-container>er et syntakselement som gjenkjennes av Angular-parsere. Det er ikke en direktiv, komponent, klasse eller grensesnitt. Det ligner mer på krøllparentesene i en JavaScript if-blokk:if (someCondition) { statement1; statement2; statement3; }Uten disse krøllparentesene ville JavaScript bare utføre den første setningen når du har til hensikt å utføre alle betinget som en enkelt blokk.
<ng-container>tilfredsstiller et lignende behov i Angular-maler.
Opprinnelig svar:
I følge denne pull-forespørselen:
<ng-container>er en logisk beholder som kan brukes til å gruppere noder, men som ikke rendres i DOM-treet som en node.
<ng-container>gjengis som en HTML-kommentar.
så denne Angular-malen :
<div>
<ng-container>foo</ng-container>
<div>
vil produsere denne typen output :
<div>
<!--template bindings={}-->foo
<div>
Så ng-container er nyttig når du vil betinget legge til en gruppe elementer (f.eks. ved å bruke *ngIf="foo") i applikasjonen din, men ikke vil pakke dem inn med et annet element.
<div>
<ng-container *ngIf="true">
<h2>Title</h2>
<div>Content</div>
</ng-container>
</div>
vil da produsere :
<div>
<h2>Title</h2>
<div>Content</div>
</div>
Svar #2
Dokumentasjonen (https://angular.io/guide/template-syntax#!#star-template) gir følgende eksempel. La oss si vi har mal-kode som dette:
<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>
Før det blir gjengitt, vil det bli «de-sukret». Det vil si at stjerne-notasjonen vil bli transkribert til notasjonen:
<template [ngIf]="currentHero">
<hero-detail [hero]="currentHero"></hero-detail>
</template>
Hvis 'currentHero' er sann, vil dette bli gjengitt som
<hero-detail> [...] </hero-detail>
Men hva hvis du vil ha en betinget utgang som dette:
<h1>Title</h1><br>
<p>text</p>
.. og du vil ikke at utdataene skal være pakket inn i en beholder.
Du kunne skrive den avsukrede versjonen direkte slik:
<template [ngIf]="showContent">
<h1>Title</h1>
<p>text</p><br>
</template>
Og dette vil fungere fint. Men nå trenger vi at ngIf har hakeparenteser [] i stedet for en stjerne *, og dette er forvirrende (https://github.com/angular/angular.io/issues/2303)
Av den grunn ble en annen notasjon opprettet, slik:
<ng-container *ngIf="showContent"><br>
<h1>Title</h1><br>
<p>text</p><br>
</ng-container>
Begge versjoner vil gi de samme resultatene (kun h1- og p-taggene vil bli gjengitt). Den andre foretrekkes fordi du kan bruke *ngIf som vanlig.