Angular如何子向父传值

Angular如何子向父传值

父亲：

Ts:

hreo :Hreo(接口)

getHeroName(hero){

        this.hreo = hreo;

}

<p *ngFor=”let hero of heroes” (click)=” getHeroName(hero)”></p>

<app-details [hero]=”hero”></app-details>

 

子页面接收

Herodetails.component.ts中

import { Component, OnInit,Input } from "@angular/ｃｏｒｅ";

import {Hero} from '../hero'

 

export class HerodetailsComponent implements OnInit {

@Input()　hero:Hero;

}

<input type="text" [value]="hero?.name">

 

 

 

组件交互  子调父

子组件

<button type=”button” id=”abc” (click)=”dian($event)”>原始按钮</button>

Dian(evt:any){

        Alert(evt.currentTarget.id)

}

在子组件中需要导入eventEmitter  Output(输出)

 

@Output()  voted = new EventMitter();

Dian(evt:any){

        let ew = evt.currentTarget.id

        this.voted.emit(ew)

}

 

父组件中

<header (voted) =”callFather($event)”></header>

callFather(event){

 alert(“父组件收到”,evt)

}