Question

我想通过子组件点击将uuid从父级传递到子级

App.component.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>

Answer 1

尝试一下：

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 
}

组件之间的click事件

1 个答案: