主页 / coding / 问题 / 78319979
Accepted
Konrad Viltersten
Asked: 2024-04-13 16:27:56 +0800 CST

*ngTemplateOutlet 和 [ngTemplateOutlet] 实际上有区别吗？

  • 772

这不是这篇文章的重复回答，也不是星号运算符在此处所做操作的（正确）解释。不过，它是建立在这些基础之上的。

最重要的是，这*ngBeep是一种方便的方式，语法确定，简短的表达方式[ngBeep]。但是，在我的代码中，我使用了以下表达式。他们做的事情完全相同（据我所知）并且行为符合预期。

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

嗯……从技术上来说，前者比后者短。然而，引入一个全新的运算符来消除单个字符似乎很愚蠢。当然，对于其他指令，保存的字符/行可能比上面的具体示例要多得多。

这两条集装箱生产线是否完全相同（在这种病态的情况下）？如果不是，它们有何不同（在幕后）？

angular

2 个回答

  1. Best Answer

    问题中的这两行等效吗？

    是的。

    然而，star-syntax-sugar 的功能远不止于此。首先，它将其内容包装在 中ng-template（因为您需要在某些条件下渲染此模板，或者可能多次，具体取决于指令）。意思是下面的代码。

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

    其次，它为传递的字段添加前缀，如下所示。

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

    然后，它引用指令本身在上下文中提供的数据，这样更方便，就像这样。

    <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. 正如您在源代码中看到的，使用*ngTemplateOutlet和[ngTemplateOutlet]没有区别，因为您使用的是相同的类。
    查看该类，您可以看到这个属性：

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

    这转化为以下等效的片段：

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

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

    事实上，如果后跟分号，*您可以使用简写来指定输入。Directive

    对于每个结构指令都是如此：它们可以引用其结构selector指令，也可以与结构指令简写一起使用。
    如果您查看我链接的文档，您会发现在使用简写时*，Angular 会将您的元素包装在 a 中ng-template，并将使用选择器的指令应用于它：
    从文档中，这两个模板是等效的：

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

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

    您会发现，使用这个强大的工具，复杂性会迅速增加，因此 Angular 不允许在同一元素上使用 2 个结构指令，因为不可能事先知道哪个指令应该具有优先级。

    这可能是两种方法之间的唯一区别：如果您想使用ngTemplateOutlet另一个结构指令，您有两种可能性：

    1. 将元素包装在 a 中ng-container并在 2 个不同的元素中使用结构指令
    2. 仅使用一种*简写
    // 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

相关问题