我有以下模板:
<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>
有办法吗?
当前回答
对某人有帮助的简短回答
模板引用变量经常引用DOM元素 模板。 也可以参考angular或web组件和指令。 这意味着您可以轻松地访问模板中的任何地方的变量
使用哈希符号(#)声明引用变量 是否能够将变量作为事件的参数传递
show(lastName: HTMLInputElement){
this.fullName = this.nameInputRef.nativeElement.value + ' ' + lastName.value;
this.ctx.fullName = this.fullName;
}
但是,你可以使用ViewChild装饰器在你的组件中引用它。
import {ViewChild, ElementRef} from '@angular/core';
在Component中引用firstNameInput变量
@ViewChild('firstNameInput') nameInputRef: ElementRef;
之后,你可以在组件中的任何地方使用this.nameInputRef。
使用ng-template
对于ng-template,略有不同,因为每个模板都有自己的一组输入变量。
https://stackblitz.com/edit/angular-2-template-reference-variable
其他回答
更新
我们可以创建像*ngIf这样的指令,并将其命名为*ngVar
ng-var.directive.ts
@Directive({
selector: '[ngVar]',
})
export class VarDirective {
@Input()
set ngVar(context: unknown) {
this.context.$implicit = this.context.ngVar = context;
if (!this.hasView) {
this.vcRef.createEmbeddedView(this.templateRef, this.context);
this.hasView = true;
}
}
private context: {
$implicit: unknown;
ngVar: unknown;
} = {
$implicit: null,
ngVar: null,
};
private hasView: boolean = false;
constructor(
private templateRef: TemplateRef<any>,
private vcRef: ViewContainerRef
) {}
}
对于这个*ngVar指令,我们可以使用以下方法
<div *ngVar="false as variable">
<span>{{variable | json}}</span>
</div>
or
<div *ngVar="false; let variable">
<span>{{variable | json}}</span>
</div>
or
<div *ngVar="45 as variable">
<span>{{variable | json}}</span>
</div>
or
<div *ngVar="{ x: 4 } as variable">
<span>{{variable | json}}</span>
</div>
Angular4 ngVar
另请参阅
Angular 4在哪里为*ngIf定义了“as local-var”行为?
原来的答案
角v4
div + ngIf + let {{variable.a}} {{variable.b}} div + ngIf + as
view
<div *ngIf="{ a: 1, b: 2, c: 3 + x } as variable">
<span>{{variable.a}}</span>
<span>{{variable.b}}</span>
<span>{{variable.c}}</span>
</div>
component.ts
export class AppComponent {
x = 5;
}
如果你不想创建像div这样的包装器,你可以使用ng-container
view
<ng-container *ngIf="{ a: 1, b: 2, c: 3 + x } as variable">
<span>{{variable.a}}</span>
<span>{{variable.b}}</span>
<span>{{variable.c}}</span>
</ng-container>
正如@Keith在评论中提到的
这将在大多数情况下工作,但它不是一个普遍的解决方案,因为它 依赖于变量为真
有关另一种方法,请参阅update。
我喜欢创建一个指令来做这件事的方法(很好的调用@yurzui)。
最后我在Medium上找到了一篇文章,Angular的“let”指令很好地解释了这个问题,并提出了一个自定义的let指令,它在我的用例中工作得很好,代码更改很少。
以下是要点(在发布时)和我的修改:
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'
interface LetContext <T> {
appLet: T | null
}
@Directive({
selector: '[appLet]',
})
export class LetDirective <T> {
private _context: LetContext <T> = { appLet: null }
constructor(_viewContainer: ViewContainerRef, _templateRef: TemplateRef <LetContext <T> >) {
_viewContainer.createEmbeddedView(_templateRef, this._context)
}
@Input()
set appLet(value: T) {
this._context.appLet = value
}
}
我的主要改变是:
将前缀从'ng'更改为'app'(你应该使用你的应用程序的自定义前缀是什么) 将appLet: T更改为appLet: T | null
不知道为什么Angular团队还没有发布一个官方的ngLet指令。
原始源代码归功于@AustinMatherne
像这样试试
<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输入的值。