- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 Angular 2 的绝对初学者,我对我正在研究的关于“绑定(bind)到自定义事件”的教程示例有一些疑问。
所以我有一个主要组件,该组件的 View 名为app.component.html:
<div class="container">
<app-cockpit
(serverCreated)="onServerAdded($event)"
(blueprintCreated)="onBlueprintAdded($event)">
</app-cockpit>
<hr>
<div class="row">
<div class="col-xs-12">
<app-server-element
*ngFor="let serverElement of serverElements"
[srvElement]="serverElement"></app-server-element>
</div>
</div>
</div>
在此 View 中定义了子组件的包含,该子组件在上一个主视图中包含此 subview ,cockpit.component.html文件内容:
<div class="row">
<div class="col-xs-12">
<p>Add new Servers or blueprints!</p>
<label>Server Name</label>
<input type="text" class="form-control" [(ngModel)]="newServerName">
<label>Server Content</label>
<input type="text" class="form-control" [(ngModel)]="newServerContent">
<br>
<button
class="btn btn-primary"
(click)="onAddServer()">Add Server</button>
<button
class="btn btn-primary"
(click)="onAddBlueprint()">Add Server Blueprint</button>
</div>
</div>
其中包含 2 个用于提交表单的按钮。
这是第一个疑问,根据我的理解,做类似的事情:
(click)="onAddServer()
意思是这样的:“当点击事件发生时,执行定义到该 View 的 Controller 中的onAddServer()方法”。
所以,进入我的 coockpit.component.ts 类:
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-cockpit',
templateUrl: './cockpit.component.html',
styleUrls: ['./cockpit.component.css']
})
export class CockpitComponent implements OnInit {
/*
EvebtEmitter è un oggetto del framework Angular che permette di emettere i nostri custom events
@Output() decorator usato per passare qualcosa fuori dal component
*/
@Output() serverCreated = new EventEmitter<{serverName: string, serverContent: string}>();
@Output() blueprintCreated = new EventEmitter<{serverName: string, serverContent: string}>();
newServerName = '';
newServerContent = '';
constructor() { }
ngOnInit() {
}
onAddServer() {
this.serverCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent});
}
onAddBlueprint() {
console.log('INTO onAddBluePrint()');
this.blueprintCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent});
}
}
应该以这种方式工作:
newServerName 和 newServerContent 变量包含用户在表单中插入的数据,因为这些变量由 [(ngModel)] 绑定(bind)指令:
<input type="text" class="form-control" [(ngModel)]="newServerName">
<input type="text" class="form-control" [(ngModel)]="newServerContent">
当用户单击添加服务器按钮时,将执行onAddServer()方法,并生成一个带有serverName和serverContent的事件 内容在外部发出:
this.serverCreated.emit({serverName: this.newServerName, serverContent: this.newServerContent});
所以一个疑问是:事件到底是什么?在我看来,这是一个包含一些信息的简单 Json 对象。
那么第二个疑问是:serverCreated事件是由这个 Controller 发送给外部的,因为它是使用@Output()装饰器来修饰的。
默认收件人是什么?在我看来,这是父组件的 Controller ,因为在我的 app.component.ts 类中,我有这个方法来处理此事件:
onServerAdded(serverData: {serverName: string, serverContent: string}) { this.serverElements.push({ 类型:'服务器', 名称:服务器数据.服务器名称, 内容:serverData.serverContent }); }
确切的意思是:
这就像我在说,从主组件的 Angular 来看,我是在说 app-cockpit 组件将这些事件扔给父组件。
我的推理正确还是我遗漏了什么?所以这意味着我只能使用这个策略将事件从子组件传递到父组件或者我可以做相反的事情(从父组件到子组件,我不知道这是否是一个真实的用例场景)。
最佳答案
你的推理基本上是正确的。
专门针对您的疑问:
1) 当您发出事件时,例如在您的情况下通过 this.serverCreated.emit()
方法调用,您可以作为 emit()
的参数传递code> method 任何对象,因此也是一个纯 javascript Json 对象。您可以传递您可以定义为 Typescript 类实例的任何其他对象以及任何基本类型(例如字符串或数字)
2) 使用 @Output() 装饰器定义的事件可以被父组件监听,因此被用作允许子组件与其父组件对话的机制。父组件可以通过对称的@Input()机制将参数传递给子组件。
您可以在 https://angular.io/guide/component-interaction 获取组件之间相互通信的方法的完整列表。
关于javascript - 这个有关自定义事件绑定(bind)的 Angular 2 教程究竟如何运作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44545419/
好的,所以我编辑了以下... 只需将以下内容放入我的 custom.css #rt-utility .rt-block {CODE HERE} 但是当我尝试改变... 与 #rt-sideslid
在表格 View 中,我有一个自定义单元格(在界面生成器中高度为 500)。在该单元格中,我有一个 Collection View ,我按 (10,10,10,10) 固定到边缘。但是在 tablev
对于我的无能,我很抱歉,但总的来说,我对 Cocoa、Swift 和面向对象编程还很陌生。我的主要来源是《Cocoa Programming for OS X》(第 5 版),以及 Apple 的充满
我正在使用 meta-tegra 为我的 NVIDIA Jetson Nano 构建自定义图像。我需要 PyTorch,但没有它的配方。我在设备上构建了 PyTorch,并将其打包到设备上的轮子中。现
在 jquery 中使用 $.POST 和 $.GET 时,有没有办法将自定义变量添加到 URL 并发送它们?我尝试了以下方法: $.ajax({type:"POST", url:"file.php?
Traefik 已经默认实现了很多中间件,可以满足大部分我们日常的需求,但是在实际工作中,用户仍然还是有自定义中间件的需求,为解决这个问题,官方推出了一个 Traefik Pilot[1] 的功
我想让我的 CustomTextInputLayout 将 Widget.MaterialComponents.TextInputLayout.OutlinedBox 作为默认样式,无需在 XML 中
我在 ~/.emacs 中有以下自定义函数: (defun xi-rgrep (term) (grep-compute-defaults) (interactive "sSearch Te
我有下表: 考虑到每个月的权重,我的目标是在 5 个月内分散 10,000 个单位。与 10,000 相邻的行是我最好的尝试(我在这上面花了几个小时)。黄色是我所追求的。 我试图用来计算的逻辑如下:计
我的表单中有一个字段,它是文件类型。当用户点击保存图标时,我想自然地将文件上传到服务器并将文件名保存在数据库中。我尝试通过回显文件名来测试它,但它似乎不起作用。另外,如何将文件名添加到数据库中?是在模
我有一个 python 脚本来发送电子邮件,它工作得很好,但问题是当我检查我的电子邮件收件箱时。 我希望该用户名是自定义用户名,而不是整个电子邮件地址。 最佳答案 发件人地址应该使用的格式是: You
我想减小 ggcorrplot 中标记的大小,并减少文本和绘图之间的空间。 library(ggcorrplot) data(mtcars) corr <- round(cor(mtcars), 1)
GTK+ noob 问题在这里: 是否可以自定义 GtkFileChooserButton 或 GtkFileChooserDialog 以删除“位置”部分(左侧)和顶部的“位置”输入框? 我实际上要
我正在尝试在主页上使用 ajax 在 magento 中使用 ajax 显示流行的产品列表,我可以为 5 或“N”个产品执行此操作,但我想要的是将分页工具栏与结果集一起添加. 这是我添加的以显示流行产
我正在尝试使用 PasswordResetForm 内置函数。 由于我想要自定义表单字段,因此我编写了自己的表单: class FpasswordForm(PasswordResetForm):
据我了解,新的 Angular 7 提供了拖放功能。我搜索了有关 DnD 的 Tree 组件,但没有找到与树相关的内容。 我在 Stackblitz 上找到的一个工作示例.对比drag'ndrop功能
我必须开发一个自定义选项卡控件并决定使用 WPF/XAML 创建它,因为我无论如何都打算学习它。完成后应该是这样的: 到目前为止,我取得了很好的进展,但还有两个问题: 只有第一个/最后一个标签项应该有
我要定制xtable用于导出到 LaTeX。我知道有些问题是关于 xtable在这里,但我找不到我要找的具体东西。 以下是我的表的外观示例: my.table <- data.frame(Specif
用ejs在这里显示日期 它给我结果 Tue Feb 02 2016 16:02:24 GMT+0530 (IST) 但是我需要表现为 19th January, 2016 如何在ejs中执行此操作?
我想问在 JavaFX 中使用自定义对象制作 ListView 的最佳方法,我想要一个每个项目如下所示的列表: 我搜了一下,发现大部分人都是用细胞工厂的方法来做的。有没有其他办法?例如使用客户 fxm
我是一名优秀的程序员,十分优秀!