我有以下模板:
<div>
<span>{{aVariable}}</span>
</div>
并希望以:
<div "let a = aVariable">
<span>{{a}}</span>
</div>
有办法吗?
我有以下模板:
<div>
<span>{{aVariable}}</span>
</div>
并希望以:
<div "let a = aVariable">
<span>{{a}}</span>
</div>
有办法吗?
当前回答
像这样试试
<ng-container
[ngTemplateOutlet]="foo"
[ngTemplateOutletContext]="{ test: 'Test' }"
></ng-container>
<ng-template #foo let-test="test">
<div>{{ test }}</div>
</ng-template>
其他回答
我试图做一些类似的事情,看起来这个问题已经在angular的新版本中得到了解决。
<div *ngIf="things.car; let car">
Nice {{ car }}!
</div>
<!-- Nice Honda! -->
如果你需要Angular语言服务中模板内部的自动补全支持:
同步:
myVar = { hello: '' };
<ng-container *ngIf="myVar; let var;">
{{var.hello}}
</ng-container>
使用async管道:
myVar$ = of({ hello: '' });
<ng-container *ngIf="myVar$ | async; let var;">
{{var.hello}}
</ng-container>
像这样试试
<ng-container
[ngTemplateOutlet]="foo"
[ngTemplateOutletContext]="{ test: 'Test' }"
></ng-container>
<ng-template #foo let-test="test">
<div>{{ test }}</div>
</ng-template>
@yurzui的原始答案将不能从Angular 9开始工作,因为一个奇怪的问题,将Angular 8应用程序迁移到9。 然而,你仍然可以从ngVar指令中受益
<ng-template [ngVar]="variable">
your code
</ng-template>
尽管它可能会导致IDE警告:“变量未定义”
更新3
问题https://github.com/angular/angular/issues/2451在Angular 4.0.0中已修复
另请参阅
https://github.com/angular/angular/pull/13297 https://github.com/angular/angular/commit/b4db73d https://github.com/angular/angular/issues/13061
更新2
这是不支持的。
有模板变量,但不支持分配任意值。它们只能用于引用它们应用的元素,导出指令或组件的名称,以及ngFor等结构指令的作用域变量,
参见https://github.com/angular/angular/issues/2451
更新1
@Directive({
selector: '[var]',
exportAs: 'var'
})
class VarDirective {
@Input() var:any;
}
然后像这样初始化
<div #aVariable="var" var="abc"></div>
or
<div #aVariable="var" [var]="'abc'"></div>
然后用这个变量
<div>{{aVariable.var}}</div>
(未测试)
# variable创建对VarDirective的引用(exportAs: 'var') var="abc"实例化VarDirective,并将字符串值"abc"传递给它的值输入。 aVariable。Var读取分配给Var指令Var输入的值。