如何在Angular中捕获3个组件的值
在Angular中捕获3个组件的值，可以通过使用@Output装饰器和事件绑定来实现。具体步骤如下：
- 在父组件中创建一个方法，用于接收子组件的值。例如，可以创建一个名为
handleValueChange()的方法。 - 在子组件中，声明一个带有@Output装饰器的事件。这个事件将在值发生变化时触发。例如，可以在子组件中创建一个名为
valueChange的事件。 - 在子组件中，当值发生变化时，通过调用
emit()方法触发valueChange事件，并传递新的值作为参数。例如，当值变化时，可以使用以下代码触发事件：
this.valueChange.emit(newValue);- 在父组件的模板中，使用事件绑定来监听子组件的值变化，并调用父组件的方法来处理这些值。例如，在父组件的模板中可以使用以下代码：
<child-component (valueChange)="handleValueChange($event)"></child-component>- 在父组件的
handleValueChange()方法中，可以获取子组件传递过来的值，并进行相应的处理。
这样，当子组件的值发生变化时，父组件就能捕获到这些值，并进行进一步的操作。
对于以上步骤中提到的Angular相关概念和技术，你可以参考腾讯云的文档和产品：
- Angular：Angular是一种用于构建Web应用程序的开发平台，支持跨平台开发。了解更多关于Angular的信息，可以参考腾讯云开发者文档中的Angular页面。
- @Output装饰器：@Output装饰器用于定义一个输出属性，并创建一个发射器，用于向父组件传递数据。了解更多关于@Output装饰器的信息，可以参考腾讯云开发者文档中的组件之间的通讯页面。
- 事件绑定：在Angular中，事件绑定用于将模板中的事件与组件中的方法进行关联。了解更多关于事件绑定的信息，可以参考腾讯云开发者文档中的事件与属性绑定页面。
希望以上信息能够帮助到您！如果有其他问题，请随时提问。
相关·内容
我在一个Angular4应用程序中工作，我正在尝试将值从子组件传递到父组件。.I已经实现了一些东西，但我无法获得预期的输出。
子组件映像...
下级组件编码...
<div class="row">
<div class="col-3">
<input type="text" readonly class="form-control col-8 text-center bg-white font-weigh
浏览 0提问于2018-03-12得票数 11
回答已采纳
在我为Angular 2找到的示例中，每个应用程序可以创建一次组件：
(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
浏览 2提问于2016-02-10得票数 4
我使用的是Angular 7，我想将angular应用程序作为一个小部件插入到另一个外部html文件中。
我知道有angular元素可以创建自定义元素并插入它，但其中有许多浏览器兼容性问题。我尝试在外部html中包含<app-root></app-root>并添加脚本，它在所有浏览器中都工作得很好。但是我无法将输入传递给根元素。
这是将我的angular应用程序包含在外部文件中的正确方式吗？以及如何将输入传递到根组件。
浏览 2提问于2020-05-09得票数 0
2回答
我希望在Vue.JS中有全局错误处理，就像Angular 2+中的错误处理系统一样。我已经尝试了这么多，但我找不到一个好的方法来实现这个处理。
想象一下，你有许多服务方法，这些方法应该一个接一个地运行(我的意思是在彼此内部)，所以在prevoius服务中编写then和catch方法是如此丑陋和不干净，现在我正在寻找一种简洁的方式来实现这种方式。我希望你能理解我的意思。
浏览 3提问于2018-08-29得票数 20
我刚接触Angular，只是一个关于输入元素上的数据绑定的问题。代码如下：
<input id="test" [paModel]="newProduct.name" (input)="newProduct.name=$event.target.value" />
和指令类：
@Directive({
selector: "input[paModel]"
})
export class PaModel {
...
@Input("paModel")
modelProperty: str
浏览 5提问于2019-11-01得票数 0
2回答
您好，我是新来的角度，并开始学习。问:我有两个组件，一个是从angular material中选择下拉列表，另一个组件是从angular material.so中选择表格。当我从下拉列表中进行选择时，我希望在表格组件中看到所选值。这是我的代码。不知何故，当我进行选择时，服务正在调用该方法并侦听，但在那之后，我期待另一个方法执行，该方法订阅侦听更改。(如果我没有使用正确的术语，请道歉) 以下是组件的结构。 navbarparent.component.html (These are 2 main components)
<div>
<app-mr-navbar>
浏览 13提问于2019-02-21得票数 3
回答已采纳
我有一个子组件，它通过事件释放数据，发出的数据与父emitter.The中的ngModel绑定。其中的发射方法是从父组件调用的。我创建了子组件，因为我有两个相同的表单。因此，我创建了一个单一的表单组件，并使用它两次，并与他们的数据绑定。
//Child Component Code
import {Component, EventEmitter, Input, Output} from 'angular2/core'
@Component({
selector: 'child-component',
template: `
<input
浏览 6提问于2017-09-09得票数 0
回答已采纳
我正在开发一个Angular 7应用程序。我添加了一个用户可以点击的图标，当他们点击它时，一个绝对定位的div就会像工具提示一样出现。工具提示被封装在一个角度组件中。 我需要使工具提示消失时，用户点击页面上的任何地方以外的工具提示。似乎我需要以某种方式在整个页面上添加一个通用的事件处理程序来捕获鼠标单击，并以某种方式检查工具提示是否打开，以及单击事件是否在工具提示上，但我不知道如何在Angular的组件模型中做到这一点。 如何使用户在工具提示之外的页面上单击时，工具提示消失？ 我应该补充的是，我不能简单地添加一个不可见的div来覆盖工具提示后面的页面，并监听点击，因为这样用户就不能点击其他页
浏览 16提问于2021-05-08得票数 0
2回答
我正试图通过以下指南制作一个有角度的web组件：
它可以工作，但是当我必须将services注入到组件中时，没有什么工作了，如果我在构造函数中写入(private service: DataService)，就会有一个空白屏幕，并且没有控制台错误。
import {Component, Injector, Input, OnInit} from '@angular/core';
import {DataService} from '../../_service/data.service';
@Component({
selector: 'optix
浏览 3提问于2020-11-13得票数 2
回答已采纳
在angular 4中，如何在同时填充输入时使用一千个分隔符？(不像这样绑定数字{{price | number}}) angular 4的具体解决方案，也可以通过javascript。为了更好地阐明，我需要这个功能的输入只是得到像这样的带有很多零的数字: 1,000,000,000。不是转换，不是百分比，不是这样的小数: 1,000,000,000.00。我的目标是让这个分隔符更容易阅读，例如，类似这样的东西: 1,000,000,000比1000000000好得多。谢谢
浏览 3提问于2018-01-20得票数 0
3回答
我尝试在我的两个组件(父组件和子组件)之间使用双向绑定，并尝试在这两个组件的ngOnChanges中检测由此引起的更改。我可以通过改变父组件(App组件)的输入/输出属性来触发子组件(测试组件)的ngOnChanges。但是，我无法通过更改子组件中的双向绑定属性来触发父组件的ngOnChanges。
工作柱塞可以在这里找到：
import { Component, OnInit, OnChange, Output, Input, EventEmitter } from '@angular/core';
@Component({
selector: 'my-app&
浏览 3提问于2017-06-09得票数 1
1回答
连接和缩小模块的好策略是什么？
我想说的是：
<script type="text/javascript" src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="te
浏览 18提问于2016-08-28得票数 0
回答已采纳
目前，我正在构建一个基于Angular6的Web应用程序，并使用AWS扩容来调用该API。
用例:在组件中，submitForm函数从服务调用updateProduct函数。此调用返回一个错误。
问题:在服务级别，在updateProduct函数中，我能够捕获错误(都很好)，，但是在组件级别，我无法捕获错误.
问:为什么？我做错了什么？
这里的代码
服务：
import { Injectable } from '@angular/core';
import { AmplifyService } from 'aws-amplify-angular';
import
浏览 0提问于2018-06-20得票数 0
在meteor-angular中，我希望在一个组件中捕获新用户登录、注销的更改。我尝试在组件的初始化中订阅userData，它没有检测到更改为用户登录/注销事件。如果我刷新该页面，它会检测到用户详细信息。当登录/注销/其他用户事件时，组件中是否可以使用任何东西？它的目的是在组件上为不同的用户重新计算用户角色，角色会根据不同的用户而变化，并希望在客户端的组件中捕获它。谢谢
浏览 0提问于2018-05-30得票数 0
4回答
我无法从ActivatedRoute或路由器导入中获取URL或路径。它为路径"“输出空白，为URL输出'/‘。我记得我使用的是工作版本。唯一能捕获正确路由的就是Router.events。我也无法订阅ActivatedRoute中的网址。以下是代码
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router, ActivatedRoute, UrlSegment, NavigationStart, RoutesRecognized } from
浏览 1提问于2018-09-03得票数 2
我正在使用一个HTTPInterceptor来处理发生在Angular app.Once中的任何错误一个错误发生了，它被抛出并由这个拦截器处理。但是，一旦向拦截器抛出了错误，我希望确定是哪个组件或服务抛出了该错误。 如果main.service.ts是发生错误的服务，我希望在我的HTTPInterceptor类中获得名称‘main.service.ts’。
浏览 12提问于2019-06-28得票数 2
我是Angular的新手，只是一个关于自定义事件的问题。对于普通的事件绑定，我们有以下代码：
<input class="form-control" (input)="selectedProduct=$event.target.value" />
但对于自定义绑定，我看到的代码如下：
<tr *ngFor="..." [pa-attr]="getProducts().length < 6 ? 'bg-success' : 'bg-warning'" (pa-category)
浏览 6提问于2019-10-28得票数 1
回答已采纳
在我目前的项目中，我们几乎在每个页面中都使用了jqGrid。我们使用了网格的丰富功能集，包括复杂的网格内联行编辑、下拉列表、复选框和其他控件、排序、列过滤等。
现在我们希望将我们的项目转换为angular 2，但我们的主要问题是替换jqGrid的丰富功能集。在开始之前，我需要做一些POC，如果所有的功能都可以在基于角度2的网格中完成。
如何在Angular 2+中使用jqGrid？
浏览 4提问于2017-04-18得票数 3
我有一个复选框，如果复选框被选中，我需要在加载时显示警报消息application.But问题是复选框在标题组件中，当我将在主页中时，它与主页component.So链接，如果复选框被选中，我需要在加载应用程序时显示警报消息。这是下面的代码，
header.component.html
<div><input checked type="checkbox">Other-component</div>
header.component.ts
import { Component, OnInit } from '@angular/core
浏览 1提问于2019-11-10得票数 0
我正在编写一个应用程序，在当前状态下，它并不是很大。它在性能上没有任何问题，但我注意到了一个奇怪的行为。我有三个组件：
map.component
dashboard.component
info.component
map.component有一个方法，它使用Subject通知dashboard.component更改布尔变量的状态(默认值设置为false)：
// Dashboard component
private changeState(): void {
this.showSomething = !this.showSomething;
}
此变量的状态以这种方式反映在da
浏览 0提问于2020-02-11得票数 0
Angular 1.X中的指令默认设置为双向绑定。默认情况下，组件具有独立的作用域。我有一个视图，如下所示：
<div class="my-view">
{{controllerVariable}}
</div>
如果我将上述设置为指令，则在以下情况下controllerVariable加载正确：
<div ng-controller="myController">
<my-view></my-view>
</div>
但是如果我将它设置为一个组件，使用以下代码：
myApp
浏览 0提问于2016-11-12得票数 7
回答已采纳
我是angular 4的新手。我发现在angular中有一种方法可以使用@Input将数据从父组件传递到子组件，如下所示：
<child [dataToPass]="test"></child>
我的问题是如何使用路由器做同样的事情。在路由器中，没有像输入这样的子定义；它只有<router-outlet></router-outlet>，那么如何使用@Input传递数据呢？
浏览 0提问于2017-09-28得票数 2
1回答
在之前的一次前端采访中，我被问到“如何在angular2服务器中调用restful api”。我说的是使用http。但面试官似乎对这个答案并不满意。正确答案是什么？谢谢你！！
浏览 3提问于2018-01-11得票数 0
2回答
Page-not-found.component.ts
import { FormsModule, NgModel } from '@angular/forms';
import { ChangeDetectorRef, Component, ElementRef, OnInit, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
import {CommonModule} from '@angular/common';
import {NgModule} from &
浏览 5提问于2017-09-19得票数 0
回答已采纳
我已经进入了角7的几个星期，在同一个父组件中的一个单独的子组件<app-child-2>上单击事件之后，我很难在父组件<parent>中隐藏/显示一个子组件<app-child-1>。
所有的子卡div只有呈现如果他们有数据，这是通过一个来自父shouldCardRender()和outputsMapToRead('Child 1')的ngIf方法完成的。shouldCardRender()方法用于在显示数据对象groupName之前，通过父方法this.checkIfCardHasAnyCheckedValues()中的另一个方法检查数据对
浏览 0提问于2019-03-16得票数 0
尝试将一个布尔值传递给我的父组件，以显示模式弹出。( Child.comp / Modal PopUp in Parent.comp中的单击事件)父组件从未接收到的布尔值
我尝试过@Output()和@Input()，Cant似乎发现了这个问题
Parent.comp.ts /User-Profile
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-user-profile',
templateUrl: './user-profile.
浏览 0提问于2019-06-14得票数 0
我是Angular的新手。我在当前的项目中使用angular 4，我正在学习使用Angular进行单元测试，只是想知道我是否可以单独测试特定的spec.ts文件。
任何帮助都是非常感谢的。
谢谢
浏览 1提问于2018-01-18得票数 3
回答已采纳
解决方案：--我忘了更改父程序显示子节点位置的。在转换过程中，所有组件的选择器都已更改。我忘记检查了，所以感谢所有指向HTML的人！
我正在升级一个角2项目到角7，我遇到了一个错误，我不能用谷歌的答案来解决。
我得到的错误是：
Can't bind to 'xClass' since it isn't a known property of 'yComponent'.
1. If 'yComponent' is an Angular component and it has 'xClass' input, then
浏览 0提问于2018-12-07得票数 0
回答已采纳
1回答
Angular组件输入静态类型
、、、、
我有两个角度组件。
具有ButtonText类型输入的ButtonComponent
@Component({
selector: 'app-button',
template: '<h1></h1>',
})
export class ButtonComponent {
@Input() text: ButtonText;
}
export class ButtonText {
constructor(private text: string) {
}
}
以及使用button并将输入传递给它的MainCompon
浏览 9提问于2018-10-14得票数 0
我正在做一个使用Angular和firebase的个人项目。我们使用firebase进行身份验证，在用户logIn之后，我们使用accessTokens传递给后台。但是accessTokens的有效期只有一个小时。我们正在尝试让用户重新登录的情况下保持会话活动的方法。下面是代码流程：
每次刷新应用程序时，我们都会调用GetTokens() (关闭和打开用户选项卡)。下面是GetTokens的实现
import { AngularFireAuth } from '@angular/fire/auth';
GetTokens() {
return new Promise((
浏览 10提问于2020-07-30得票数 0
我无法想象这有多难，但是我在任何地方都找不到关于如何使用Jasmine为具有@Input绑定的组件编写简单单元测试的文档。
我有一个基本组件，如下所示：
import { Component, Input } from '@angular/core';
@Component({
selector: 'action-button',
templateUrl: './action-button.component.html',
styleUrls: ['./action-button.component.scss'],
浏览 18提问于2021-05-25得票数 1
2回答
我尝试过许多堆栈溢出选项，比如。
我想要做的是获得一个带有ajax请求的html页面，并在我的自定义组件中呈现/编译这个模板。
我发现angular2有两个不推荐的组件，我必须使用angular2
在我以前的解决方案中，我可以设置一个'innerHtml‘来呈现HTML。现在我需要一个新的解决方案。
谁能帮我？
page.component.ts
import { Component, ViewChild, ViewContainerRef, ComponentFactory, OnInit, ComponentFactoryResolver } from '@angular/
浏览 3提问于2016-10-17得票数 12
回答已采纳
1回答
我正在用Angular2构建一个交互式web应用程序，我正在寻找一种方法来捕获在一个角度组件上的右键点击。我还需要防止在右键单击时出现浏览器上下文菜单，这样我就可以显示自己的自定义上下文菜单。
我知道在angular 1中，您必须创建一个自定义指令来捕获右键单击事件。这在Angular 2中仍然是这样的吗，或者它是内置的/有更简单的方法吗？我已经看过之前的一些SO问题，但它们与Angular2无关。
如何实现捕获右键并阻止浏览器上下文菜单出现在Angular2中？
浏览 1提问于2017-01-16得票数 28
回答已采纳
我的页面一半是Angular 7，一半是JSP。当在页面的JSP部分(位于Angular应用程序之外)的选择字段上选择了一个值时，我希望将该值发送到我的Angular 7应用程序，并触发它使用新值进行更新。我如何将值注入Angular应用程序，其次，我如何触发应用程序使用新值进行更新？
浏览 0提问于2019-02-16得票数 4
基于对我的另一个问题()的评论，我正在尝试使用angular-cli来帮助构建和管理一个angular项目。然而，我似乎找不到任何关于如何在项目中创建第二个网页的文档，对我来说，这似乎是一个非常基本的任务。我试着用ng g component {component name}创建一个“组件”，但这并没有给构建结果增加任何东西。
浏览 0提问于2017-03-13得票数 4
回答已采纳
我试图弄清楚如何侦听angular2中特定元素上的特定事件。
HTML
<div id="hello-world">
Just a random message
</div>
在javascript中，我将其实现为：
document.getElementById("hello-world").addEventListener("mousewheel", (e) => {
console.info(e);
});
不知道在Angular2中实现这一点的正确方法是什么，希望有人能给出答案。
浏览 3提问于2017-04-19得票数 0
我是Angular的新手，我读过关于事件绑定的文章，所以我可以这样做：
<button (click)="doSomething()"></button>
我想知道是否有可能创建一个自定义事件并做同样的事情。比方说，我想要有一个自定义事件，比如：deleteItem，可以这样做吗？又是如何做到的？
<my-component (deleteItem)="doSomething()"></my-component>
浏览 1提问于2019-05-20得票数 6
回答已采纳
我有一个Angular 1应用程序，它使用一个简单的contentEditable指令，它可以在模板中像这样使用：
<span contenteditable="true" ng-model="model.property" placeholder="Something">
编辑该元素将触发$setViewValue(element.html()，并按预期工作。
我想用类似简洁的模板语法在Angular2中做一些事情。理想情况下，我希望模板看起来像这样：
<span contentEditable="true"
浏览 4提问于2016-01-18得票数 10
回答已采纳
下面的问题是关于Angular 5的。 我有一个表单组件MyForm.Form.ts，它显示在多个父组件中。但是，有两个表单控件(让我们称它们为agency_email和delivery_details)，它们只需要在两个父表单中显示，并且只在显示时才需要验证。如何才能做到这一点？
浏览 12提问于2019-10-09得票数 0
在Angular 8中，我通常在HTML文件中按照规范在父组件和子组件之间传递数据，如下所示
<div id ="parent-container">
<child-button
[ngClass]="child-button"
[attr.id]="child-button"
[setOption]="options"
(notifyChild)="notifyChildButton"
(not
浏览 0提问于2020-06-05得票数 0
我使用Angular 2。对于全局变量access，我创建了一个服务并将其注入到我的组件页面中。
我可以在任何页面中访问它，但当我更新该变量时，在另一个页面中访问它时所做的更改将不会产生影响。
这是GlobaldataService中的代码
import { Injectable } from '@angular/core';
@Injectable()
export class GlobaldataService {
public var1="haii";
}
这是我使用的服务：
constructor(public obj: GlobaldataS
浏览 1提问于2017-10-30得票数 2
1回答
历史(推状态)向前/向后按钮不工作的角2路由器，我已经测试了这一点在Chrome和火狐。前进按钮永远不会工作，向后按钮只工作2个步骤，而UI没有根据后向按钮做出响应。
我有如下代码。
app.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component';
浏览 1提问于2016-05-12得票数 4
回答已采纳
这两个组件在app.vue中使用vue-路由器定义如下：
<div class='app'>
<div class='nav'>
<router-link to='/a'>to A component</router-link>
<router-link to='/b'>to B component</router-link>
</div>
<div class='conte
浏览 4提问于2017-11-10得票数 1
回答已采纳
1回答
在Angular2中，是否可以显示，只需在浏览器中路由，而不使用任何Angular2组件？RouterModule.forRoot中的某种忽略
浏览 1提问于2016-12-26得票数 1
回答已采纳
1回答
我正在尝试在离子模式下使用Swiper Angular，但是swiper没有被初始化。当应用程序运行时，它不会在控制台中显示任何错误，但当检查代码时，我会得到以下结果： <swiper _ngcontent-kch-c220="">
<!--container-->
<!--container-->
<!--container-->
</swiper> 这就是我如何实现swiper的： <swiper
#swiper
[slidesPerView]="3"
[spaceB
浏览 9提问于2021-11-04得票数 0
回答已采纳
1回答
当我尝试连接到未经授权的URL时，我在Chrome中得到：
zone.js:1274 POST http://localhost:8080/rest/v1/runs 401 (Unauthorized)
core.umd.js:3462 EXCEPTION: Response with status: 401 Unauthorized for URL: http://localhost:8080/rest/v1/runs
my Home组件的代码为：
import {Component, OnInit} from '@angular/core';
import {Run} fr
浏览 3提问于2016-10-05得票数 11
回答已采纳
1回答
我将Angular 4与material结合使用。我有两个主要组成部分..。
1) Login and 2) Dashboard
在dashboard中有一些延迟加载的组件，如profile、employee等。我想设置header，为此我使用了<mat-toolbar>
<mat-toolbar color="primary">
<mat-toolbar-row>
<span>My application</span>
<span class="example-spacer"
浏览 0提问于2018-04-05得票数 2
回答已采纳
2回答
我已经开发了一个Angular2应用程序使用路由。
我的问题是：
我有一个登录页面，其中有不同的HTML和CSS.Once成功登录，我重定向到另一个页面有不同的HTML和CSS。但是我的主要布局是index.html(登录页面)。因此，我需要了解如何使用多个布局？
我做过一些研发工作，但我不知道如何实施？
请查找以下代码：
1) app.routing.module
import { NgModule } from '@angular/core';
import { Routes, Router, RouterModule } from '@angular/router
浏览 8提问于2016-12-13得票数 0
回答已采纳
我是Angular的新手，我有一个问题:我需要在ComponentB中使用ComponentA中的一个变量，所以这是我的代码(我需要在组件" result“组件A中使用"favoriteSeason”输入结果
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn }
from '@angular/forms';
import {MatRadioModu
浏览 0提问于2018-07-12得票数 0
2回答
我想做一个待办事项列表，我有两个组件(稍后还有更多)，我将共享一个Tache数组。
Navbar组件
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Tache } from './tache';
import { TacheService } from './tache.service';
import { InMemoryDataService } from './en-memo
浏览 2提问于2017-04-22得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
