angular中子组件使用@output向父组件传值

子组件中ts

import { Component, EventEmitter, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-ecn-list',
  templateUrl: './ecn-list.component.html',
  styleUrls: ['./ecn-list.component.less'],
})
export class EcnListComponent implements OnInit {
  // 创建一个EventEmitter
  @Output() openDetail: EventEmitter<any> = new EventEmitter();
  constructor() {}
  ngOnInit(): void {}
  
  // 点击预览按钮的时候,给父组件传值
  preview(item) {
    this.openDetail.emit(item);
  }
}

父组件中html

<app-ecn-list (openDetail)="openDetail($event)"></app-ecn-list>

父组件中ts

  // 预览功能方法
  openDetail(item) {
    console.log(item);
  }

猜你喜欢

转载自blog.csdn.net/qq_38679823/article/details/129691648