Início / coding / Perguntas / 78319979
Accepted
Konrad Viltersten
Asked: 2024-04-13 16:27:56 +0800 CST

Existe uma diferença entre *ngTemplateOutlet e [ngTemplateOutlet] na verdade?

  • 772

Esta não é uma duplicata respondida por esta postagem nem a explicação (correta) do que o operador asterisco faz aqui . No entanto, ele se baseia neles.

O resultado final é que essa *ngBeepé uma maneira conveniente, sintática e breve de expressão para [ngBeep]. No entanto, em meu código, usei as seguintes expressões. Eles fazem exatamente a mesma coisa (até onde eu sei) e se comportam conforme o esperado.

<div *ngFor="let item of [1,2,3]">
  #{{item}}
  <ng-container *ngTemplateOutlet="content"></ng-container>
  <ng-container [ngTemplateOutlet]="content"></ng-container>
</div>

Bem... tecnicamente falando, o primeiro é mais curto que o segundo. No entanto, parece bobagem introduzir um operador totalmente novo para eliminar um único caractere. É claro que, para outras diretivas, os caracteres/linhas salvos podem ser bem maiores do que no exemplo específico acima.

Essas duas linhas de contêineres são precisamente equivalentes (neste caso patológico)? Se não, como eles diferem (sob o capô)?

angular

2 respostas

  1. Best Answer

    Essas 2 linhas da pergunta são equivalentes?

    Sim.

    No entanto, o açúcar de sintaxe estelar é um pouco mais do que isso. Primeiramente, ele envolve seu conteúdo no ng-template(porque você precisa renderizar esse modelo em alguma condição ou, possivelmente, várias vezes, dependendo da diretiva). Significa o seguinte código.

    <span *ngIf="show">text</span>
// equivalent
<ng-template [ngIf]="show"><span>text</span></ng-template>

    Em segundo lugar, adiciona um prefixo para os campos passados, conforme abaixo.

    <ng-container *ngTemplateOutlet="content; context: {var1: 123}">
</ng-container>
// ...and its equivalent
<ng-container [ngTemplateOutlet]="content" 
              [ngTemplateOutletContext]="{var1: 123}">
</ng-container>

    Depois, faz referência aos dados que a própria diretiva fornece no contexto, o que é mais conveniente, assim.

    <li *ngFor="let item of items; index as i; first as isFirst; trackBy: trackByFn">...</li>
// equivalent
<ng-template ngFor let-item [ngForOf]="items" 
             let-i="index" let-isFirst="first"
             [ngForTrackBy]="trackByFn">
  <li>...</li>
</ng-template>
    • 2

  2. Como você pode ver no código fonte , using *ngTemplateOutlete [ngTemplateOutlet]não difere, pois você está usando a mesma classe.
    Olhando para a classe você pode ver esta propriedade:

    @Input() public ngTemplateOutletContext: C | null = null;

    Isso se traduz nos seguintes trechos sendo equivalentes:

    <ng-container *ngTemplateOutlet="content; context: myContextObj">
</ng-container>

    <ng-container [ngTemplateOutlet]="content" 
              [ngTemplateOutletContext]="myContextObj">
</ng-container>

    Na verdade, usando a *abreviatura você pode especificar as entradas se Directiveforem seguidas por ponto e vírgula.

    Isto é verdade para todas as directivas estruturais : podem ser usadas referindo-se às suas selectorou podem ser usadas com a abreviatura da directiva estrutural .
    Se você der uma olhada nos documentos que vinculei, verá que, ao usar a *abreviação, o Angular envolverá seu elemento em a ng-templatee aplicará a diretiva com o seletor a ele:
    Nos documentos, esses dois modelos são equivalentes :

    <div class="name" *ngIf="hero">{{hero.name}}</div>

    <ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

    Você vê que com essas ferramentas poderosas, a complexidade pode aumentar rapidamente, então o Angular não permite 2 diretivas estruturais no mesmo elemento porque é impossível saber previamente qual diretiva deve ter prioridade.

    Esta é talvez a única diferença entre as duas abordagens: se quiser usar ngTemplateOutletoutra directiva estrutural, tem 2 possibilidades:

    1. Envolva o elemento em a ng-containere use a diretiva estrutural em 2 elementos diferentes
    2. Use apenas uma *abreviação
    // Using 2 "*" shorthand in the same element: the code won't compile
<ng-container *ngTemplateOutlet="content" *ngIf="true">
</ng-container> 

// Approach 1, the code will compile
<ng-container *ngIf="true">
  <ng-container [ngTemplateOutlet]="content">
  </ng-container>
</ng-container>

// Approach 2, the code will compile
<ng-container [ngTemplateOutlet]="content" *ngIf="true">
</ng-container>
    • 0

relate perguntas