Question

我想知道context参数在Angular中的createEmbeddedView()方法中的用途。在线角度文档不提供此信息。

例如，我正在阅读这段代码，其中作者已经制作了一个迭代器结构指令。

    import {
    Directive, ViewContainerRef, TemplateRef, Input, SimpleChange
} from "@angular/core";

@Directive({
    selector: "[paForOf]"
})

export class PaIteratorDirective {
    constructor(private container: ViewContainerRef, private template: TemplateRef<Object>) {
    }

    @Input("paForOf") dataSource: any;

    ngOnInit() {
        this.container.clear();
        for (let i = 0; i < this.dataSource.length; i++) {
            this.container.createEmbeddedView(this.template, new PaIteratorContext(this.dataSource[i]));
        }
    }
}

class PaIteratorContext {
    constructor(public $implicit: any) { }
}

这显示在模板上的复选框选中事件中，如下所示：

    <div class="checkbox">
    <label><input type="checkbox" [(ngModel)]="showTable" />Show Table</label>
</div>
<table *paIf="showTable" class="table table-sm table-bordered table-striped">
    <tr>
        <th></th>
        <th>Name</th>
        <th>Category</th>
        <th>Price</th>
    </tr>
    <template [paForOf]="getProducts()" let-item>
        <tr>
            <td colspan="4">{{item.name}}</td>
        </tr>
    </template>
</table>

我想了解这段代码：

this.container.createEmbeddedView(this.template, new PaIteratorContext(this.dataSource[i]));

为什么我需要创建一个PaIteratorContext（）类的对象？为什么我不能这样做：

this.container.createEmbeddedView(this.template, this.dataSource[i]);

请帮帮忙？

Answer 1

定义模板时，您可以通过let-paramname指定输入参数：

<template [paForOf]="getProducts()" let-item='item'>
     <span>{{item.name}}</span>
</template>

上下文对象允许您在创建模板时将这些参数传递给模板。

this.container.createEmbeddedView(this.template, {item: {name: 'John'}}`

为什么我需要创建一个PaIteratorContext（）类的对象？为什么我不能这样做：

您不必创建PaIteratorContext的实例，只需在该特定情况下传递具有name属性的对象。所以以下内容也可以使用：

this.container.createEmbeddedView(this.template, { $implicit: this.dataSource[i] });

如果输入属性指定为此let-item而没有第二部分=something，则嵌入式视图会将其视为let-item=$implicit，因此您必须使用$implicit传递上下文对象属性。

Answer 2

如果您传递{item: 'someValue'}，则加盖的模板可以使用

访问该值

<template let-foo="item"> 
  <div>{{foo}}</div>
</template>

或者如果您通过{$implicit: 'someValue'}

<template let-foo> 
  <div>{{foo}}</div>
</template>

Angular中的createEmbeddedView（）上下文参数是什么

2 个答案: