如何在单击按钮时将绑定变量的值传递给模板中的方法
How to pass value of a binding variable to a method in the template on button clicked
我正在学习如何使用@Input、@Output 和 EventEmitter 装饰器在父项和子项之间进行绑定。
在下面发布的 html 部分
<h1 appItemDetails [item]="currentItem">{{currentItem}}</h1>
currentItem has value equal to "TV". and i pass this value to the binding variable item.
我在打印 item 值的 ngOnInit 中添加了 console.log 以确保从父项到子项的绑定工作正常。
在
<button (click) = addNewItem(item.value)></button>
在这个按钮标签中,我试图将绑定变量项的值作为参数传递给方法 addNewItem()。
对于 addNewItem() 方法,它存在于组件中,应该使用正确的参数调用它,该参数是绑定变量 item
的值
当我编译应用程序时,我收到下面发布的错误。
请告诉我如何将绑定变量的值传递给单击按钮的方法
错误
TS2339: Property 'item' does not exist on type 'AppComponent'.
2 <button (click) = addNewItem(item.value)></button>
~~~~
src/app/app.component.ts:5:16
5 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
app.component.ts:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'InputOutputBindings';
currentItem = 'TV';
@Output() newItemValue = new EventEmitter<string>();
addNewItem(val : string) {
this.newItemValue.emit(val);
console.log("add new item");
}
}
item-details.directive.ts:
import { Directive, Input, Output, EventEmitter } from '@angular/core';
@Directive({
selector: '[appItemDetails]'
})
export class ItemDetailsDirective {
@Input() item : string = "";
constructor() { }
ngOnInit() {
console.log("ngOnInit->:" + this.item)
}
}
app.coponent.html:
<h1 appItemDetails [item]="currentItem">{{currentItem}}</h1>
<button (click) = addNewItem(item.value)></button>
您可以像下面这样添加 exportAs:
@Directive({
selector: '[appItemDetails]'
exportAs: 'customdirective',
})
export class ItemDetailsDirective {
....
}
并且在您的 html 中,您可以添加对指令的引用并获取绑定值:
<h1 #test="customdirective" appItemDetails [item]="currentItem">{{currentItem}}</h1>
<button (click) = addNewItem(test.item)></button>
我正在学习如何使用@Input、@Output 和 EventEmitter 装饰器在父项和子项之间进行绑定。 在下面发布的 html 部分
<h1 appItemDetails [item]="currentItem">{{currentItem}}</h1>
currentItem has value equal to "TV". and i pass this value to the binding variable item.
我在打印 item 值的 ngOnInit 中添加了 console.log 以确保从父项到子项的绑定工作正常。
在
<button (click) = addNewItem(item.value)></button>
在这个按钮标签中,我试图将绑定变量项的值作为参数传递给方法 addNewItem()。 对于 addNewItem() 方法,它存在于组件中,应该使用正确的参数调用它,该参数是绑定变量 item
的值当我编译应用程序时,我收到下面发布的错误。 请告诉我如何将绑定变量的值传递给单击按钮的方法
错误
TS2339: Property 'item' does not exist on type 'AppComponent'.
2 <button (click) = addNewItem(item.value)></button>
~~~~
src/app/app.component.ts:5:16
5 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
app.component.ts:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'InputOutputBindings';
currentItem = 'TV';
@Output() newItemValue = new EventEmitter<string>();
addNewItem(val : string) {
this.newItemValue.emit(val);
console.log("add new item");
}
}
item-details.directive.ts:
import { Directive, Input, Output, EventEmitter } from '@angular/core';
@Directive({
selector: '[appItemDetails]'
})
export class ItemDetailsDirective {
@Input() item : string = "";
constructor() { }
ngOnInit() {
console.log("ngOnInit->:" + this.item)
}
}
app.coponent.html:
<h1 appItemDetails [item]="currentItem">{{currentItem}}</h1>
<button (click) = addNewItem(item.value)></button>
您可以像下面这样添加 exportAs:
@Directive({
selector: '[appItemDetails]'
exportAs: 'customdirective',
})
export class ItemDetailsDirective {
....
}
并且在您的 html 中,您可以添加对指令的引用并获取绑定值:
<h1 #test="customdirective" appItemDetails [item]="currentItem">{{currentItem}}</h1>
<button (click) = addNewItem(test.item)></button>