javascript - change - page title angular 4

<ng-container> vs<template>

Question

ng-container se menciona en la documentación de Angular 2, pero no hay una explicación de cómo funciona y cuáles son los casos de uso.

Se menciona particularmente en las directivas ngPlural y ngSwitch .

¿ <ng-container> hace lo mismo que <template> , o depende de si se escribió una directiva para usar uno de ellos?

Son

<ng-container *ngPluralCase="''=0''">there is nothing</ng-container>

y

<template [ngPluralCase]="''=0''">there is nothing</template>

se supone que es lo mismo?

¿Cómo elegimos uno de ellos?

¿Cómo se puede usar <ng-container> en una directiva personalizada?

Answer 1

Editar: ahora está documented

<ng-container> al rescate

El <ng-container> Angular es un elemento de agrupación que no interfiere con los estilos o el diseño porque Angular no lo coloca en el DOM.

(...)

El <ng-container> es un elemento de sintaxis reconocido por el analizador angular. No es una directiva, componente, clase o interfaz. Es más como las llaves en un bloque if de JavaScript:

  if (someCondition) {
      statement1; 
      statement2;
      statement3;
     }

Sin esas llaves, JavaScript solo ejecutaría la primera instrucción cuando intente ejecutarlas condicionalmente como un solo bloque. El <ng-container> satisface una necesidad similar en las plantillas angulares.

Respuesta original:

De acuerdo con esta solicitud de extracción :

<ng-container> es un contenedor lógico que puede usarse para agrupar nodos pero no se representa en el árbol DOM como un nodo.

<ng-container> se representa como un comentario HTML.

entonces esta plantilla angular:

<div>
    <ng-container>foo</ng-container>
<div>

producirá este tipo de salida:

<div>
    <!--template bindings={}-->foo
<div>

Por lo tanto, ng-container es útil cuando desea agregar condicionalmente un grupo de elementos (es decir, usar *ngIf="foo" ) en su aplicación, pero no desea envolverlos con otro elemento .

<div>
    <ng-container *ngIf="true">
        <h2>Title</h2>
        <div>Content</div>
    </ng-container>
</div>

entonces producirá:

<div>
    <h2>Title</h2>
    <div>Content</div>
</div>

Answer 2

La documentación ( https://angular.io/guide/template-syntax#!#star-template ) da el siguiente ejemplo. Digamos que tenemos un código de plantilla como este:

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

Antes de ser renderizado, será "des-azucarado". Es decir, la notación asterix se transcribirá a la notación:

<template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</template>

Si ''currentHero'' es verdadero, esto se representará como

<hero-detail> [...] </hero-detail>

Pero, ¿qué pasa si quieres una salida condicional como esta?

<h1>Title</h1><br>
<p>text</p>

.. y no desea que la salida se envuelva en un contenedor.

Puede escribir la versión sin azucar directamente así:

<template [ngIf]="showContent">
  <h1>Title</h1>
  <p>text</p><br>
</template>

Y esto funcionará bien. Sin embargo, ahora necesitamos ngIf para tener corchetes [] en lugar de un asterisco *, y esto es confuso ( https://github.com/angular/angular.io/issues/2303 )

Por esa razón se creó una notación diferente, así:

<ng-container *ngIf="showContent"><br>
  <h1>Title</h1><br>
  <p>text</p><br>
</ng-container>

Ambas versiones producirán los mismos resultados (solo se mostrarán las etiquetas h1 y p). Se prefiere el segundo porque puede usar * ngIf como siempre.

Answer 3

Los casos de uso de Imo para ng-container son reemplazos simples para los cuales una plantilla / componente personalizado sería excesivo. En el documento de API mencionan lo siguiente

use un contenedor ng para agrupar múltiples nodos raíz

y supongo que de eso se trata: agrupar cosas.

Tenga en cuenta que la directiva ng-container desaparece en lugar de una plantilla donde su directiva envuelve el contenido real.

Answer 4

Un caso de uso cuando desee usar una tabla con * ngIf y * ngFor - Como poner un div en td / th hará que el elemento de la tabla se comporte mal -. Me enfrenté a este problema y that fue la respuesta.