在现有的组件模板中，我有此（简化的）元素：
<input type="button" #refreshPrice />
此属性拾取（我不知道正确的术语），因此我们可以在单击事件中订阅并在单击输入元素时调用功能。
我想用我开发的组件替换此 input 元素，这会使它看起来（简化）这样：
<spinner-button #refreshPrice></spinner-button>
此子组件将其作为其（简化）模板：
<button>
<mat-spinner></mat-spinner>
</button>
因此，现在按钮元素在“子组件”模板中需要具有 #refreshprice hash属性（？）。
为此，也许 spinner-button 元素应将哈希属性的名称作为属性值。这是完整的旋转器组件类文件：
import { Component, Input, OnInit } from "@angular/core";
@Component({
selector: "spinner-button",
templateUrl: "./spinner-button.component.html",
styleUrls: ["./spinner-button.component.css"]
})
export class SpinnerButtonComponent implements OnInit {
constructor() {}
@Input() targetElement: string;
ngOnInit() {
}
}
从理论上讲， targetElement 属性可以将属性连接到 button 元素作为哈希属性 - 但是如何完成？
In an existing component template I have this (simplified) element:
<input type="button" #refreshPrice />
This is picked up (I don't know the correct term) by this property so we can subscribe to it's click event and call a function when the input element is clicked.
I want to replace this input element with a component I've developed, which would make it look (simplified) like this:
<spinner-button #refreshPrice></spinner-button>
This child component has this as its (simplified) template:
<button>
<mat-spinner></mat-spinner>
</button>
So now the button element, in the child component template, needs to have the #refreshPrice hash attribute (?) attached.
To do this, perhaps the spinner-button element should take the name of the hash attribute as an attribute value. Here is the complete spinner component class file:
import { Component, Input, OnInit } from "@angular/core";
@Component({
selector: "spinner-button",
templateUrl: "./spinner-button.component.html",
styleUrls: ["./spinner-button.component.css"]
})
export class SpinnerButtonComponent implements OnInit {
constructor() {}
@Input() targetElement: string;
ngOnInit() {
}
}
In theory, the targetElement property can then be attached to the button element as a hash attribute - but how is this done?
发布评论
评论（1）
@input（）属性在这里允许您将一个值绑定到组件上的变量，如果您想让父母根据组件数据进行某些操作，则可能需要使用> @output（）并发出自定义事件。如果要求只是收听单击事件，则添加（单击）= functionTobeCalled（）应该在此处帮助您的原因。您也可以参考官方文档：
https://angular.io/guide/guide/inputs-ustputs
the
@Input()attribute here allows you to bind a value to a variable on your component, if you want to have the parent do something based on your components data, you might want to use@Output()and emit a custom event. If the requirement is just listen to a click event then adding a(click)=functionToBeCalled()should help your cause here.You can refer to the official docs as well:
https://angular.io/guide/inputs-outputs