[英]Pass variable in Angular 2 template
Is there a way I can pass variables to templates in Angular2?有没有办法可以将变量传递给Angular2中的模板?
Let's say I have the following code:假设我有以下代码:
<div *ngFor="foo in foos">
<ng-container *ngTemplateOutlet="inner"</ng-container>
</div>
---------------
<ng-template #inner>
{{ foo.name }}
</ng-template>
How can I get the template to print the name
of foo
?如何让模板打印
foo
的name
?
You should do like this: 你应该这样做:
<div *ngFor="foo in foos">
<ng-container *ngTemplateOutlet="inner; context:foo"></ng-container>
</div>
<ng-template #inner let-name="name">
{{ name }}
</ng-template>
But this doesn't work if the template is located in another component.
但是,如果模板位于另一个组件中,则不起作用。 How do you pass a context object in such scenario?
如何在这种情况下传递上下文对象?
I added 我补充道
@Input() itemTemplate: TemplateRef<any>;
in component where I will use it, and in template of this component I write something like this: 在我将使用它的组件中,在这个组件的模板中,我写这样的东西:
<ng-container *ngTemplateOutlet="itemTemplate; context: item"></ng-container>
Code of template from outside component: 外部组件的模板代码:
<ng-template #dataRendererTpl let-data="data">
<div class="data">Hello, {{data.name}}</div>
Just pass link to dataRendererTpl as @Input() property to component in which you need it 只需将dataRendererTpl链接作为@Input()属性传递给您需要它的组件
In the case you want to send the whole iterable object to the template, you can pass the array into the context as follow: 如果要将整个可迭代对象发送到模板,可以将数组传递到上下文中,如下所示:
<ng-container *ngTemplateOutlet="inner; context:foos"></ng-container>
<ng-template #inner let-foos="values()">
<div *ngFor="foo in foos">
{{ foo.name }}
</div>
</ng-template>
in my case I needed the object to remain intact because I had some kind of recursion, this worked 在我的情况下,我需要对象保持完整,因为我有一些递归,这是有效的
<div *ngFor="foo in foos">
<ng-container *ngTemplateOutlet="inner; context: {foo : foo}"></ng-container>
</div>
<ng-template #inner let-foo="foo">
{{ foo.attributexy }}
</ng-template>
Let's make use of the $implicit key in the context object of ngTemplateOutletContext or ngTemplateOutlet, as it will set its value as default.让我们在 ngTemplateOutletContext 或 ngTemplateOutlet 的上下文对象中使用 $implicit 键,因为它会将其值设置为默认值。
<div *ngFor="let foo of foos">
<ng-container *ngTemplateOutlet="inner; context: { $implicit: foo}"></ng-container>
</div>
<ng-template #inner let-foo>
{{ foo.name}}
</ng-template>
<ng-template #inner let-user>
{{ user.name}}
</ng-template>
I'm Assuming, ng-template and div with ng-container are in same component.我假设,带有 ng-container 的 ng-template 和 div 在同一个组件中。
If the template is in other component, make use of @input() decorator inside template component.ts如果模板在其他组件中,请在模板 component.ts 中使用 @input() 装饰器
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.