如何在Angular 8的可点击项目上使用调用函数？
在Angular 8中，可以通过以下步骤在可点击项目上使用调用函数：
- 首先，在组件的HTML模板中，使用Angular的事件绑定语法来绑定一个点击事件。例如，可以在一个按钮上绑定一个点击事件：
<button (click)="myFunction()">点击我</button>- 在组件的TypeScript代码中，定义一个名为
myFunction的函数，并在其中编写需要执行的逻辑。例如，可以在控制台打印一条消息：
myFunction() {
console.log("点击事件触发了！");
}- 如果需要在点击事件中传递参数，可以使用Angular的事件绑定语法的特殊语法。例如，可以传递一个字符串参数：
<button (click)="myFunction('Hello')">点击我</button>myFunction(message: string) {
console.log("点击事件触发了！传递的消息是：" + message);
}这样，当点击按钮时，myFunction函数将被调用，并执行相应的逻辑。
对于Angular 8的可点击项目使用调用函数的示例，您可以参考以下链接：
相关·内容
2回答
函数包含在ts文件中
angular
我正在尝试获取一个函数，只需单击按钮即可将字符串记录到控制台。在使用Angular时，我在typescript文件中编写函数。我一直收到一个错误，说函数还没有定义，但我不知道哪里出错了
ngOnInit() {
function myFunction(){
console.log('button has been clicked');
}
resume:1 Uncaught ReferenceError: myFunction is not defined
at HTMLButtonElement.onclick
浏览 0提问于2019-06-23得票数 0
3回答
通过角度组件将函数作为参数传递给(单击)事件
angular、input、components、selector
我正在尝试创建一个带有取消和发送按钮的组件，以避免在每个表单上使用c&p，但我找不到一种方法将函数作为参数传递给组件选择器
HTML：
<btn-submit [cancelFunction]='test' [acceptFunction]='test'></btn-submit>
TS父级：
test = () => console.log("this is a test");
TS子项：
import { Component, Input } from '@angular/core';
浏览 0提问于2018-07-27得票数 7
回答已采纳
1回答
角2 NgTemplateOutlet与字符串变量。
angular
我希望在..ts文件中有一个模板字符串，并将其添加到NgTemplateOutlet中。
我本来希望这能成功，但却没有成功。
<template [ngTemplateOutlet]="template" [ngOutletContext]="$implicit">
其中模板是作用域中的字符串变量。所以我实现了这个，但是这并不像我想要的那样起作用。
import { Component, AfterViewInit } from '@angular/core';
import { ToastController } from '
浏览 5提问于2016-10-08得票数 4
2回答
Angular:单击事件可以运行一条语句吗？
angular
在Angular 4中，是否可以在不编写函数的情况下在单击事件中执行代码？例如：
<button (click)="bool=true; console.log("print"); Function()">Button1</button>
在做了一些阅读之后，这可能是不可能的原因是html元素，在本例中是button，属于typescript组件，而不是html模板，所以你不会在函数之外有代码。但是..。我不确定这是否接近正确的理解。
编辑：
这篇名为的文章回答了console.log的问题，但在其他一些情况下仍然需要一些解释，例如
&l
浏览 23提问于2017-08-16得票数 1
回答已采纳
5回答
按一下标签按钮在角度上不起作用
javascript、html、angular、typescript
我试着理解为什么这段代码不工作在角
：
<button onclick="myFunction('hello')">Click me</button>
类型标
@Component({
selector: 'app-create',
templateUrl: './create.component.html',
styleUrls: ['./create.component.css']
})
export class CreateComponent {
construct
浏览 6提问于2019-12-28得票数 0
回答已采纳
3回答
操作不会在reactjs中的按钮单击时调用
reactjs、react-redux
我是个新手。我创建了一个演示application.And，我试图在单击按钮时隐藏消息。1)但该操作不会在单击按钮时调用。2)当控制台页面重载时，reducer.This内部的action显示如下。
inside reducer
redux.js:30 Object {type: "@@redux/INIT"}
redux.js:31 Object {}
redux.js:29 inside reducer
redux.js:30 Object {type: "@@redux/PROBE_UNKNOWN_ACTION_j.r.h.g.s.q.b.y.b.9"}
浏览 13提问于2017-06-20得票数 0
回答已采纳
3回答
TypeScript:在事件中使用jquery $(this)
jquery、typescript
HTML：
<div>
<button data-id="3">Click Me</button>
</div>
在经典的jQuery中，我会这样做：
$("div").on("click","button", test);
function test(){
alert($(this).data("id"));
}
获取所单击元素的data-id
在TypeScript中(在一个类中)，我使用：
class foo { ...
$("div"
浏览 1提问于2014-04-04得票数 39
回答已采纳
3回答
从分量B看构件A的角4-调用函数
angular、typescript
我有两个组成部分。组件A包含一个函数，我想通过单击组件B视图中的一个按钮来调用它。
我试过这样的方法：
视图构成部分B
<button (click)="MyApp.myFunction()">Click here</button>
app.component.ts (名称class= MyApp)
myFunction(){
console.log("clicked the button");
}
浏览 0提问于2017-10-03得票数 0
回答已采纳
2回答
当父组件具有操作时，Angular7将新数据传递给子组件
angular、parent-child、onchange、reload
父组件包含一个子组件和一个按钮 父级包含字符串颜色：[color]=color 当点击按钮时， 数据被传递给子对象并触发ngOnChanges parent.html <button (click)=>'changeColor()'>Change Color </button>
<app-child [color]=color></app-child> parent.ts color = {color: 'blue'}
changeColor(){
this.color.color = 'red
浏览 12提问于2019-10-10得票数 0
回答已采纳
1回答
在sibling2.component.html元素中从sibling1.component.ts角度调用myFunction
angular、components、siblings
因此，我有这两个兄弟组件，sibling1.component和sibling2.component。 sibling1.component.ts myFunction() {
console.log('something');
} 我想调用sibling2组件中的myFunction，如下所示： sibling2.component.html <button (click)="myFunction()"></button> 我读过一些关于共享数据的文章，但对我帮助不大。 有什么合适的方法来做这件事吗？ 谢谢!
浏览 15提问于2020-07-09得票数 0
2回答
值在基于类的组件中的eventHandler中。
javascript、html、reactjs、jsx
我对这种反应很陌生，在这里有点困惑。
export default class Message extends Component {
m1() {
console.log("Hello world");
}
render() {
return (
<button className="btn btn-primary" onClick={this.m1}>Click 1</button>
);
}
}
为什么这个值不是按钮
浏览 9提问于2022-05-20得票数 1
6回答
如何在Angular Web组件上调用方法(自定义元素)
angular、web-component、custom-element
我已经创建了一个Angular Web组件，如下所示
@Component({
selector: 'dlx-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.scss'],
encapsulation: ViewEncapsulation.Native,
})
export class SliderComponent implements OnInit {
open() {
console.log(
浏览 0提问于2018-10-14得票数 6
1回答
从在类型记录组件中编写的html中调用类型记录记录方法
javascript、html、angular、typescript、leaflet
我有一个弹出与两个按钮，更新和删除。当按下“更新”按钮时，我希望使初始弹出窗口消失，一个新的弹出窗口显示与相同的字段填充，但在底部可编辑另外2个按钮，确认和删除。
我想在一个单独的方法中配置更新弹出的代码，并在按下Update按钮时从HTML按钮调用它
如何从按钮组件的TypeScript组件中编写的HTML调用所需的方法(myFunction)？
private initMap(): void {
this.map = L.map('map', {
center: this.centroid,
zoom: 2.8
});
t
浏览 4提问于2022-05-23得票数 1
2回答
组件标签上的角2(点击)
javascript、angular
我有两个angular组件。第一个组件是带有标记<my-list-comp></my-list-comp>的列表。我的第二个组件是一个带有标记<my-button-comp></my-button-comp>的按钮。在list组件的模板中，我使用了按钮组件及其标记，如下所示：
模板my-list-comp.html
<div class="list>
<ul><!-- some stuff --></ul>
<my-button-comp></my-butt
浏览 2提问于2018-04-14得票数 1
回答已采纳
2回答
指令中的AngularJS附加作用域函数
javascript、angularjs、tooltipster
我有一个将附加到ng-repeat中的元素的AngularJS指令，如下所示：
查看：
div.chat-wrapper
ul.chat-messages
li(ng-repeat='chat in chatmessages' chat-tooltip)
指令：
angular.module('app')
.directive('chatTooltip',
function() {
return {
restrict: 'A'
浏览 0提问于2014-12-21得票数 0
2回答
无法更新angular组件中jquery事件中模型属性更改的视图
jquery、angular
我在更新视图时遇到了一些有线问题。 场景： 我在angular组件的oninit上声明了jquery按钮点击事件。在单击事件时，我正在更新视图上的模型值和绑定，但当我单击按钮时，它不会在视图中更新。如果我在angular click event(create)中使用了same，它会在视图中显示更新值。 不确定这里出了什么问题。 import { Component, OnInit, ElementRef } from '@angular/core';
import { fromEvent } from 'rxjs';
import * as $ from &#
浏览 22提问于2020-06-21得票数 1
回答已采纳
1回答
键，键，模糊不工作在角度12。
javascript、angular、angular-material
我正在使用角度12，并试图玩的事件。唯一的单击事件正在工作，没有其他事件被触发。
allEvents.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-all-events',
templateUrl: './all-events.component.html',
styleUrls: ['./all-events.component.css']
})
export class AllEventsComp
浏览 2提问于2021-11-01得票数 0
2回答
为什么(单击)不在<button>中发送我的数据，而(更改)在<input>中在Angular、HTML
html、angular、typescript、http
我想发送一些数据到我的Glassfish RESTful服务器。当我在input标记中使用(change)时，它会激活该方法并成功地发送数据，但是当我使用(click)或(change)来激活该方法时，它什么也不做。我尝试将发送数据方法和路由方法分开，但无济于事。我该如何解决这个问题呢？
html文件：
<div class="container py-5">
<div class="row">
<div class="col-md-12">
<div class="row
浏览 0提问于2019-06-27得票数 0
2回答
角度按钮(onClick)事件不工作
angular、typescript
我有一个按钮，它应该调用一个注销用户的函数。由于某些原因，事件根本不起作用。代码如下: TS文件： import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { AuthService } from 'src/app/services/auth.service';
@Component({
selector: 'app-login',
templat
浏览 31提问于2021-10-06得票数 1
回答已采纳
2回答
角8分量嵌套在同一组件事件发射器内
javascript、angular、typescript、ionic-framework、angular8
我使用了嵌套在同一组件中的组件。当我更改父组件附加函数中的复选框时，调用正确且事件发射器工作正常，但当我更改子复选框时，附加函数被触发，但事件发射器不可用(据我所知，事件发射器与子函数没有绑定)。我想在更改子复选框时发出数据。
如果有人知道答案，请帮助我解决这个问题。使用嵌套在同一组件中的组件的术语是什么？
谢谢你
这是stackblitz链接 (请检查控制台)
tree.component.ts
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component
浏览 2提问于2020-05-29得票数 3
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
腾讯云开发者
