Question

我有一个传递模板的组件。在这个组件内部，我想传递上下文，以便我可以显示数据。

@Component({
  selector: 'my-component',
  providers: [],
  template: `
    <template [ngTemplateOutlet]="templ" [ngOutletContext]="{isVisible: true}">
    </template>
  `
})
export class MyElementComponent implements OnInit {
    @ContentChild(TemplateRef) templ;
    constructor(){}
}

现在在其他组件中使用组件时：

<my-component>
    <template>
        {{isVisible ? 'yes!' : 'no'}}
    </template>
</my-component>

所以在my-component我传递了一个模板，该模板由名为@ContentChild的{{1}}在其类中处理。

然后，在templ的模板中，我将my-component传递给templ，此外，我正在使用ngTemplateOutlet设置为ngOutletContext来传递上下文isVisible。

我们应该在屏幕上看到true，但似乎上下文永远不会通过。

我的角度版本：

yes!

Answer 1

很长一段时间后，我成功了。

单值示例：

@Component({
  selector: 'my-component',
  providers: [],
  template: `
    <template [ngTemplateOutlet]="templ" [ngOutletContext]="{isVisible: true}">
    </template>
  `
})
export class MyElementComponent implements OnInit {
    @ContentChild(TemplateRef) templ;
    constructor(){}
}

<my-component>
    <template let-isVisible="isVisible">
        {{isVisible ? 'yes!' : 'no'}}
    </template>
</my-component>

循环示例：

@Component({
  selector: 'my-component',
  providers: [],
  template: `
    <div *ngFor="let element of data">
        <template [ngTemplateOutlet]="templ" [ngOutletContext]="{element: element}">
        </template>
    </div>
  `
})
export class MyElementComponent implements OnInit {
    @ContentChild(TemplateRef) templ;
    constructor(){
        this.data = [{name:'John'}, {name:'Jacob'}];
    }
}

--- 

<my-component>
    <template let-element="element">
        {{element.name}}
    </template>
</my-component>

结果：

<div>John</div>
<div>Jacob</div>

Answer 2

不推荐使用ngOutletContext并将其重命名为ngTemplateOutletContext。

在更改日志中搜索“NgTemplateOutlet＃ngTemplateOutletContext”

CHANGELOG

通过Angular2中的ngOutletContext将上下文传递给模板

2 个答案: