angular - 从组件到组件的单击事件
问题描述
我想通过子组件单击将uuid从父级传递给子级
应用组件.ts
import { Component } from '@angular/core';
import { v4 as uuid } from 'uuid';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
list: string[] = [];
gen() {
this.list.push(uuid());
}
}
Child.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'my-child',
templateUrl: './child.component.html'
})
export class ChildComponent {
@Input() lists;
@Input() gens(){};
}
Child.component.html
<button (click)="gens()">Generate</button>
<table border='2'>
<tr *ngFor="let id of lists">
<td> {{ id }} </td>
</tr>
</table>
App.component.html
<my-child [lists]='list' [gens]='gen()'></my-child>
解决方案
尝试这个:
Child.component.html:
<button (click)="gens()">Generate</button>
Child.component.ts:
@Input() getUuid: any;
@Output() clickedValue = new EventEmitter(false);
gens() {
this.clickedValue .emit(true);
}
App.component.html:
<my-child [lists]='list' (clickedValue)="onClickedValue($event)" [getUuid]="uuid" ></my-child>
App.component.ts:
uuid: any;
onClickedValue(event) {
if(event) this.uuid = //write the code for assigning your uuid
}
推荐阅读
- excel - 是否有公式或 VBA 方法来确定 Excel 中突出显示的单元格?
- scala - 这个语法在凿子中是如何解释的?
- javascript - 按属性数组对对象数组进行排序
- android-linearlayout - 如何在 LinearLayout 中制作两个按钮,它们将位于布局的中间
- c# - 等待回调
- android - 如何根据 Kotlin 中的唯一键值检索 Firebase 数据
- database - 在每行的开头查找管道
- android - Firestore + Proguard + Android billingclient : java.lang.RuntimeException: No properties to serialize found on class org.json.JSONObject
- c++ - 为什么c++不能printf向量B[0]?
- c++11 - 我可以从移动赋值运算符调用析构函数吗?