如何从 *ngIf 将上下文传递给 Angular 5 模板答案

【问题标题】：How to pass context to Angular 5 template from *ngIf如何从 *ngIf 将上下文传递给 Angular 5 模板
【发布时间】：2018-02-15 15:15:20
【问题描述】：

Angular 的NgTemplateOutlet 允许您将上下文传递给属性绑定的插座。

<ng-container *ngTemplateOutlet="eng; context: {$implicit: 'World'}"></ng-container>
<ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>

Angular 的*ngIf 允许您根据布尔条件嵌入一个或另一个模板：

<ng-container *ngIf="isConditionTrue; then one else two"></ng-container>
<ng-template #one>This shows when condition is true</ng-template>
<ng-template #two>This shows when condition is false</ng-template>

如何将上下文传递给*ngIf 语法中引用的这些模板？

【问题讨论】：

我认为这是不可能的。我见过其他人有同样的问题，他们最终都使用了 ngTemplateOutlet

标签： angular templates if-statement angular-template

【解决方案1】：

实际上你可以将你的条件输入到 ngTemplateOutlet 中（并去掉 ngIf）。

<ng-container *ngTemplateOutlet="condition ? template1 : template2; context: {$implicit: 'World'}">
</ng-container>

【讨论】：

嘿；我现在不记得我在二月份是如何解决这个问题的，但我喜欢你的解决方案。
当我们在 ngFor 循环中使用它并将迭代项作为 $implicit 上下文传递时，这真是太棒了。然后我们可以从循环外部重用<ng-template>s。
在使用 *ngIf="observable$ | async as data; else loadingTemplate 并且您想要传递您想要加载的内容时，这无济于事的用例，例如“加载我很棒的数据”
@chaimm 你是对的。您需要将我的代码包装在中，这将首先解析异步值
@Sielu 这也无济于事，因为您尝试显示的 else 模板仅在异步值未解析的情况下才有效，例如加载器模板动态说明正在加载的内容。因此，只要未解决异步值，您就不会进入ng-container

【解决方案2】：

当您有一个表达式时，可接受的答案有效，但在您有多个 ngIf 表达式和模板时会变得复杂。

有多个表达式、生成的模板甚至不同的上下文变量的完整示例：

<!-- Example ngFor -->
<mat-list-item
    *ngFor="let location of locations$; let l = index"
    [ngSwitch]="location.type"
    >
    <!-- ngSwitch could be ngIf on each node according to needs & readability -->

    <!-- Create ngTemplateOutlet foreach switch case, pass context -->
    <ng-container *ngSwitchCase="'input'">
        <ng-container 
            *ngTemplateOutlet="inputField; context: { location: location, placeholder: 'Irrigation Start', otherOptions: 'value123' }">
        </ng-contaier>
    </ng-container>

    <ng-container *ngSwitchCase="'select'">
        <ng-container 
            *ngTemplateOutlet="selectField; context: { location: location, selectSpecificOptions: 'scope.someSelectOptions' }">
        </ng-contaier>
    </ng-container>

    <!-- ngSwitchCase="'others'", etc. -->

</mat-list-item>



<!-- Shared ngTemplates & note let-[variable] to read context object into scope -->
<ng-template 
    #inputField 
    let-location="location"
    let-placeholder="placeholder
    let-otherOptions="otherOptions"
    <!-- Context is now accessible using let-[variable] -->
    INPUT: {{ location.value }} {{ placeholder }} {{ otherOptions }}
</ng-template>

<ng-template 
    #selectField 
    let-location="location"
    let-options="selectSpecificOptions"
    <!-- Context is now accessible using let-[variable] -->
    SELECT: {{ location.value }} {{ options }}
</ng-template>

在哪里；

location$ = [
    {type: 'input',  value: 'test'}, 
    {type: 'input',  value: 'test 2'}, 
    {type: 'select', value: 'test 3'}
];

【讨论】：