什么是Angular中的createEmbeddedView()上下文参数 [英] What is createEmbeddedView() context parameter in Angular

问题描述

我想知道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]);

请帮助?

解决方案

定义模板时，可以通过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属性的上下文对象.

I want to know what purpose the context parameter serves in createEmbeddedView() method in Angular. The online angular docs do not provide this information.

For example I was reading this code where the author has made an iterator structural directive.

    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) { }
}

This is shown on the checkbox checked event on the template like this:

    <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>

I want to understand this code:

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

Why i need to create an object of PaIteratorContext() class? why i can't just do this:

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

Please help ?

解决方案

When you define a template you can have input parameters specified through let-paramname:

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

The context object is what allows you to pass those parameters to the template when creating it.

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

Why i need to create an object of PaIteratorContext() class? why i can't just do this:

You don't have to create an instance of the PaIteratorContext, you just have to pass an object with the name property in that particular case. So the following will work as well:

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

If the input property is specified like this let-item without second part =something, the embedded view treats it as let-item=$implicit so you have to pass a context object with $implicit property.

这篇关于什么是Angular中的createEmbeddedView()上下文参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！