Angular2 -在父组件中从子组件运行函数
Angular2是一种流行的前端开发框架，它使用TypeScript编写，用于构建现代化的Web应用程序。在Angular2中，组件是应用程序的基本构建块，它们可以相互通信和交互。
在父组件中从子组件运行函数，可以通过以下步骤实现：
- 在子组件中定义一个输出属性（Output property），用于向父组件发送事件。可以使用@Output装饰器来定义输出属性。例如，在子组件中定义一个名为"childEvent"的输出属性：
@Output() childEvent = new EventEmitter<any>();- 在子组件中，当需要触发事件时，调用输出属性的emit方法，并传递需要传递给父组件的数据。例如，在子组件的某个函数中触发事件：
this.childEvent.emit(data);- 在父组件中，使用子组件的标签，并绑定子组件的输出属性到一个父组件的方法。例如，在父组件的模板中使用子组件，并绑定子组件的输出属性到一个名为"onChildEvent"的父组件方法：
<app-child (childEvent)="onChildEvent($event)"></app-child>- 在父组件中，实现"onChildEvent"方法来处理子组件触发的事件。该方法将接收子组件传递的数据作为参数。例如，在父组件的类中实现"onChildEvent"方法：
onChildEvent(data: any) {
// 在这里处理从子组件传递过来的数据
}通过以上步骤，就可以在父组件中从子组件运行函数，并且可以传递数据。
关于Angular2的更多信息和学习资源，可以参考腾讯云的Angular2产品介绍页面：Angular2产品介绍
相关·内容
2回答
Angular 7:将参数传递给其他组件错误
javascript、angular、typescript、events、components
我有两个组件，一个父组件和一个子组件，我想将变量的值发送到父组件，我尝试了下面的代码，但没有成功。子组件被正确地发送了信息，但是父组件没有接收，看起来父组件中的函数没有识别要触发的数据的接收。 子组件 ...
private elements:any;
@Output() element = new EventEmitter<any>();
constructor() {
}
ngOnInit() {
this.sendContent();
}
sendContent() {
this.elements = "hi";
浏览 21提问于2019-02-22得票数 0
回答已采纳
1回答
两个角度组件之间的通信
angular、typescript
我想将子组件的数据用于父组件中的图表。在一个angular文档中，我找到了一种方法来解决我的问题，但它不起作用。我的图表仍然是空的。我是不是在代码中遗漏了什么，或者这项技术不能解决我的特殊问题？我添加了一些代码片段，以便以一种简单的方式表示问题。 Child.ts import {Component, EventEmitter, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-child-component',
templateUrl: './
浏览 13提问于2021-10-06得票数 0
2回答
值不发送到父组件。
angular
我试图将一个值从一个子组件发送到父组件，但是我看到一个未定义的值正在传递。
这是我的密码
孩子
loanAdjustmentSubmitted = new Subject<any>();
if (resp.header.statuscode === "1") {
this.loanAdjustmentSubmitted.next(resp);
}
父级
@Input() loanAdjustmentSubmitted: any;
console.log(this.loanAdjustmentSubmitted);
我做错什么了吗？
浏览 2提问于2021-06-18得票数 1
回答已采纳
5回答
当值从父级传递到子级时，ngOnChanges不工作
angular
为什么即使在ngOnChanges的值发生变化之后也不触发child_message？我看到当值从父传递到子时会触发ngDocheck()。但是，它被多次触发，不仅是在传递值时，而且在初始化组件时也是如此，我想要的是在初始化后更改值时触发的东西。
ParentComponent.ts
import { Component, OnInit,ViewChild,AfterViewInit, OnChanges, Input } from '@angular/core';
import { ChildComponent } from '../child/child.compo
浏览 1提问于2019-09-06得票数 0
3回答
如何在角度上跨组件发出消息
angular、typescript、eventemitter
如何在角度上跨不相关的组件发出字符串值？我有一个登录组件，当用户成功登录到我的后端API时，HTML响应将包含他们的用户名。然后，我希望这个用户名被发出到一个独立的配置文件组件中。
发射器在它自己的类中定义：
import { EventEmitter } from "@angular/core";
export class Emitters{
static messageEmitter = new EventEmitter<string>();
登录方法：
onLogin() {
const usn = this.loginForm.get('use
浏览 5提问于2021-12-23得票数 -1
4回答
从角分量中删除输出属性值
angular、typescript、rxjs、angular-components、angular9
我认为实验是从这样的情况下产生的，在这种情况下，我有时需要为我的角度分量的输出添加和删除函数。这是一个例子
父组件将只包含子组件<my-component>的输出函数。
ParentComponent
class ParentComponent{
myOutputFunction = null;
setOutputFunction() {
this.myOutputFunction = () => {
// do something
};
}
removeOutputFunction() {
this.myOutputF
浏览 2提问于2020-04-02得票数 2
回答已采纳
5回答
如何从子组件更改父组件的变量
angular、typescript
我对角质还不熟悉。我正在尝试从子组件访问/变异父组件的变量。我画了一张小图来解释我的结构。
标签1:变量(要变异)所在的父组件。
标签2:子组件，它将在单击事件上更改父变量。
标签3:子区域内的按钮将触发更改。
我检查了许多解决方案，例如：
但我解决不了我的问题。我还创建了一个。请看一下我的密码。
timeselector.component.ts
import { Component, ViewChild } from '@angular/core';
import { MonthpickerComponent } fr
浏览 2提问于2020-03-03得票数 3
回答已采纳
1回答
如何在angular2中将变量从子组件模板传递给父组件？
angular、angular2-routing、angular2-template、angular2-directives
我已经创建了4个组件。它们是1.图标组件2.工具栏组件3.设计组件和4. 4.Tree组件
在图标组件中，我从中导入了大约10个图标，并为其分配了一个值。
在工具栏组件中，我使用图标组件呈现了这10个图标。
在“设计和树模板”中，我使用了工具栏组件，但它将显示设计和树页面中的所有10个图标。我只想在设计中显示一组图标，在树中显示另一组图标。是否有任何方法可以限制哪些图标应该显示在设计和树在工具栏组件。
Toolbar.component.ts:
import {Component, Input, Output, EventEmitter} from "@angular/core"
浏览 0提问于2017-06-08得票数 0
2回答
在我的子组件中，单击一个按钮就会触发一个进程并返回一个布尔值。我需要在父组件中捕获这个布尔值，并启用/禁用一个按钮。我以前从未使用过@Output()。我已经创建了一个示例来显示这个问题。在开发工具中，我得到这个错误：
ERROR TypeError: _co.onclickValidateAndSave is not a function
child.component.ts
import { Component, OnInit, EventEmitter, Output } from '@angular/core';
@Component({
selector: &#
浏览 3提问于2019-03-01得票数 1
1回答
如何在父ts文件中获得输出事件发射器布尔值？
angular、typescript、angular12
我的子组件中有下面的代码
@Component({
selector: 'app-child'
})
export class ChildComponent {
@Output()
dataDeleted: EventEmitter<boolean>;
constructor() {
this.dataDeleted = new EventEmitter<boolean>();
}
delete() {
this.dataDeleted.emit(true);
浏览 3提问于2022-07-25得票数 -1
回答已采纳
4回答
如何在Angular4中将数据从子组件传递给父组件
angular、angular4-router、angular4-httpclient
我在一个Angular4 application.In中工作，我想把数据从子组件传递给父component.let，解释细节.
app.component.html
密码..。
<div class="col-3">
<br>
<form class="form-inline">
<div class="input-group">
<div class="input-group-pr
浏览 0提问于2018-03-16得票数 0
回答已采纳
6回答
Angular2 :父/子组件内部的双向绑定
angular
版本："angular2"："2.0.0-beta.6“
我想在父/子组件案例中实现双向绑定。
在我的子组件上，我使用双向绑定在编辑时显示文本。
子组件(InputTestComponent [selector:'input-test'])：
<form (ngSubmit)="onSubmit()" #testform="ngForm">
{{name}}
<textarea #textarea [(ngModel)]="name" ngControl="name
浏览 16提问于2016-02-25得票数 32
回答已采纳
2回答
为什么需要使用默认的更改检测策略调用detectChanges()？
angular、typescript、angular2-changedetection
我正在开发一个Angular 4应用程序，但我遇到了一个问题，因为当模型发生变化时，我必须调用this.changeDetectorRef.detectChanges();来更新视图。例如，我有一个用于分页的代码：
changePage(pageNumber) {
this.currentPage = pageNumber;
// why do I need to do this?
this.changeDetectorRef.detectChanges();
}
我已经明确地将组件上的更改检测策略设置为ChangeDetectionStrategy.Default，但这没有任何效
浏览 16提问于2017-07-21得票数 24
回答已采纳
1回答
@Output和Viewchild在角度上有什么区别？
angular、output、viewchild
我在子组件中有下拉列表，我想在父组件中使用下拉选择的值。我有两个选项，第一个是使用@Output，第二个是使用@Viewchild。我弄糊涂了该用哪一种。哪一种是最好的方法，为什么？
浏览 8提问于2022-08-23得票数 1
2回答
角单元测试子组件上的模拟父组件
angular、jestjs、testing-library、angular-testing-library
我正在尝试测试子组件，但是它需要一个父组件来实现它的主要功能。
如何使用“模拟”父级测试子组件？
(使用Jest，角14，TypeScript)
parent.component.ts
@Component({...})
export class ParentComponent {
onChildClicked(child: ChildComponent) {
// ...
}
}
child.component.ts
@Component({...})
export class ChildComponent {
constructor(private pa
浏览 14提问于2022-08-26得票数 2
2回答
在angular2中使用另一个组件中的组件数组
angular、typescript
我有一个声明为public的数组，如：
public arr: Array<any> = []
在AddUserComponent中存储用户名。
我需要在另一个组件AddTopicComponent中使用这个数组将用户名显示为下拉列表。
如何在AddTopicComponent中使用这个数组值？这两个组件不是父-子组件。
浏览 6提问于2017-12-06得票数 0
4回答
角4事件发射器不发射
angular、emitter
所以我有一个事件发射器工作得很好。在我的孩子里，我调用了一个函数：
(click)="EnterEditMode()
火灾：
EnterEditMode(){
this.enterEdit.emit(null);
}
在我的父母中，我：
enterEdit(){
console.log("got some text");
}
这是完美无缺的。但是现在我想在它旁边添加第二个输出。所以在孩子身上，我叫：
SaveChanges();
它触发一个函数：
SaveChanges() {
this.saveChanges.emit(nul
浏览 4提问于2017-12-06得票数 4
回答已采纳
1回答
如何在角9中创建自定义文本框组件
angular、typescript、components
我想为HTML标签创建一些常用的组件，比如文本框。
父组件
<form (ngSubmit)="onSubmit()">
<textbox [name]="'articleDto.articleName'" (changeEvent)="txtChange($event)" [label]="'Article Name'" [placeholder]="'Article Name'"></textbox>
浏览 3提问于2020-05-28得票数 2
回答已采纳
5回答
$emit不触发子事件
vue-component、vue.js、vuejs2
对于一个VueJS 2.0项目，在父组件上有以下内容
<template>
<child></child>
<button @click="$emit('childEvent)"></button>
</template>
关于儿童部分，我有：
{
events: { 'childEvent' : function(){.... },
ready() { this.$on('childEvent',...) },
methods: { childEvent
浏览 2提问于2016-11-16得票数 12
回答已采纳
1回答
如何获取父组件中React子组件的属性/对象
reactjs、typescript、react-functional-component
我已经为包含地址字段、输入框和SelectItems的示例创建了FC say子组件，当从另一个组件父级调用此FC时，我需要访问输入框的值并选择用户添加的项。
您能给我一个简单的例子，比如父组件通过函数组件样式TypeScript调用时子组件中的1文本框。
下面是具有两个输入和一个SelectItem的子组件的示例代码
return (
<>
<Accordion varient={'grouped'} expanded theme={theme}
items={[
{
浏览 5提问于2022-08-31得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
