问题标签 [angular-event-emitter]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
61 浏览

angular - Observables 服务 - 误解/最佳实践

我在两个组件之间的观察服务方法中苦苦挣扎。我有一个包含设置组件的配置文件组件。两者都使用 user.service,其中提供者在 app.module.ts 中定义。提供者未在其他任何地方定义。因此,当我在 settings.component 上更改例如 firstName 并保存它时。在我重新加载页面之前,更改不会反映在 profile.component 侧边栏中。

下班后: 我找到了一个解决方案,可以在更新发生后立即触发的事件发射器上执行此操作。这将解决我上面的问题,但我认为这不是正确的方法,因为我阅读了下面的文章:

EventEmitter 的正确用途是什么?

如果没有事件发射器,它不应该工作吗?

所以我的问题是: 你会在这种情况下使用什么方法或者最好的做法是什么?当然,我的代码中可能存在问题。我真的很陌生。

app.module.ts

在我定义的 app.module.ts 中:

profile.component.ts

profile.component.html

用户服务.ts

profile.settings.admin.component.ts

在该组件中,只有一个表单会在提交时触发以下代码:

0 投票
2 回答
46 浏览

angular - Angular2:无法向其他组件发送数据。后端服务被调用两次

我有一个要求ngOnInit,我从 URL 中提取查询参数,准备一个 url 用于进行后端api调用,http://localhost:8080/myapp/video0=5&video1=6并发出接收到的数据以在其他组件中使用。

现在,当我查看浏览器控制台和网络选项卡时,我看到对我的后端 api 的两个调用:一个没有参数,一个有参数。显然,带有参数的参数可以获取我想要的数据。这data需要在另一个组件中进行进一步处理。

以下是ngOnInit一个组件的外观:

从后端获取数据的部分:getSharedVideoData

getVideos中的方法modelService是:

最后,另一个组件上的发射器事件:

addVideos方法用于进一步处理包含警报语句的数据。当页面加载时,我看到两个警报语句,但都没有任何数据。

这很奇怪,因为浏览器网络选项卡向我显示了响应,但我猜它没有正确发出。我做的正确吗?

我怎样才能做到这一点?

0 投票
1 回答
78 浏览

javascript - 这个 Angular 5 示例处理父子组件之间的通信究竟是如何工作的?

我从 Angular 开始,我对这个与父组件和子组件之间的通信相关的示例究竟是如何工作的有一些疑问。

所以我有这个父组件。该组件用于显示项目列表(每个项目由子组件表示)。与这个组件交互,我可以在这个项目列表中添加和删除项目。

这是父组件:

这是它的模板:

然后我让子组件表示由父组件处理的列表中的单个项目。这是子组件:

这是儿童模板:

好的,现在我对这两个组件如何相互作用有一些疑问:

在父组件模板中:

那是指子组件(由app-product标记)。

在我看来,基本上我正在迭代定义到父组件类(字符串数组)中的产品productName列表,并且每个字符串都传递给定义到子组件类中的变量,为此我使用@Input()子组件类中此属性的装饰器:

基本上,这个@Input()装饰器使父组件神圣化,以便在每次迭代时将值“注入”到子组件属性中。

是吗?还是我错过了什么?

然后我有处理从项目列表中删除项目的行为:单击列表的元素时(由子组件实现)。该元素从列表中删除(因此从页面中删除)。

它是如何工作的(我的想法):

每个元素在子组件视图中由以下代码表示:

单击对象时,会将onClicked()事件执行到子组件类中。我无法直接从子组件类中删除所选对象,因为项目数组已定义到父组件类中。所以这个方法会发出一个事件:

具有“类型”productClicked(是事件类型还是什么?)。在父组件视图中接收到此事件:

调用onRemoveProduct(product)从数组中删除具有此名称的对象的方法。

这是正确的还是在我的推理中我错过了什么?

另一个疑问是:处理事件和这种情况是否是一种整洁而正确的方式?

0 投票
2 回答
2570 浏览

angular - How to access the target of an $event bound to a DOM element using a custom directive?

I've created a directive

to define a custom event that should fire when a DOM element to which it is bound gets "attached" to the view. So for example <input (attached)="do something" ... does something as soon as the <input> shows up on the page.

The event fires well, my problem is however that when I'd like to access its target like <input (attached)="$event.target.something = 'anything'" I get an error such as

Cannot set property 'something' of undefined

How to upgrade my directive so I can access the target of the event?

0 投票
4 回答
20369 浏览

javascript - 当元素通过 ngIf 变为可见时触发事件

我有一些带有 ngIf 的 div,我只是想知道特定的 div 是否是现在可见/活动的,比如像焦点这样的事件触发器(它不起作用)或其他东西,并且这个事件,我会设置一个变量什么的。

0 投票
1 回答
278 浏览

angular - 在 angularjs 控制器中侦听来自 angular 4 组件的事件

我正在开发一个混合角度应用程序。我需要在 angularjs 控制器中监听一个事件(可能是一个 observable ),并且该事件将由 angular 4 组件触发。我们有什么办法可以真正做到这一点?

0 投票
2 回答
88 浏览

angular - http调用失败时如何通知转储组件?

目前我有一个智能组件products.component.ts和一个转储组件products-create.component.ts。当用户提交创建按钮时,转储组件向智能组件发出事件。

products.component.ts调用以将http产品保存在服务器中。现在我需要知道的是,如何通知转储组件服务调用成功或失败?转储组件应在失败时显示错误,并在成功时导航到列表组件。

0 投票
3 回答
5575 浏览

angular - Angular 5 事件发射器触发了两次

我正在使用 Angular 5。其中我使用事件发射器将数据从一个组件传递到另一个组件。

在第一次单击事件发射器不订阅子组件中的值。在第二次点击事件发射器触发两次。

头组件.ts

搜索component.ts

测试服务.ts

在将响应式表单数据从标题组件传递到搜索组件时,它不会在第一次单击时触发。在下一次单击时,它已触发两次。

0 投票
2 回答
6759 浏览

angular - 角度无法发出数组

DateRangeComponent我尝试使用和装饰器在按钮单击另一个( ViewerComponent)组件时发出数组。EventEmitterOutput

有一种getData()方法可以从服务DateRangeComponentEventEmitter发出数组。

Input组件应该使用装饰器接收发出的数组:

并且在 HTML 中有一个属性绑定:

但是接收有问题。怎么了?

堆栈闪电战

0 投票
1 回答
1826 浏览

angular5 - Angular 5 - 事件发射器(类型上不存在属性“更新”......)

我有一个组件,当一个人的名字发生变化时,我想通过发出一个事件来更新它。我的问题是代码由于错误而无法编译。这是我的代码

应用窗体组件

ApplicationFormComponent.html

名称DisplayComponent

我的问题基本上是当我将 angular cli 与命令 ng server --aot 一起使用时,由于此错误而无法编译:

我编写了一个类似的组件,它使用了一个没有这个问题的事件发射器,所以我不知道如何修复这个错误。

有任何想法吗?