从父html按钮单击调用以调用组件功能

Question

组件 A html

在组件A中，我正在加载service2.com，我有一个Primeng面板，在单击按钮时，我试图调用app-command-packet-details组件函数：

app-command-packet-details

假定将html内容加载到<p-overlayPanel #cp dynamic="true" [appendTo]="btnCp"> <app-command-packet-details #commandPacket [id]="taskId"></app-command-packet-details> </p-overlayPanel> <p-button label="CP" (click)="commandPacket.getCommandPacket($event, pagedTasks, cp)" #btnCp></p-button>

组件Panel

command-packet-details.component.ts

如何将@Component({ selector: 'app-command-packet-details', templateUrl: './command-packet-details.component.html', styleUrls: ['./command-packet-details.component.css'] }) export class CommandPacketDetailsComponent implements OnInit { @Input() id: number; ... getCommandPacket(id: number) { this.renderSvc.getCommandPacket(id).subscribe(data => { this.commandPacket = data; this.commandKeys = Object.keys(this.commandPacket); }); } } 组件加载到面板中？

• 在另一页上，我正在使用<app-command-packet-details，它会加载html数据，并将其显示在页面上。

Answer 1

您可以使用@ViewChild来实现，

@Component({
  selector: 'app-command-packet-details',
  templateUrl: './command-packet-details.component.html',
  styleUrls: ['./command-packet-details.component.css']
})

export class CommandPacketDetailsComponent implements OnInit {
  getCommandPacket(id: number) {
     // Logic
  }
}


@Component({
  selector: 'p-overlayPanel',
  template: `<app-command-packet-details></app-command-packet-details>
             <p-button label="CP" (click)="getCommandPacketParent($event, 1234)" #btnCp></p-button>

    `,
  directives: [CommandPacketDetailsComponent]
})

class POverlayPanel {
  @ViewChild(CommandPacketDetailsComponent) child: CommandPacketDetailsComponent;

  getCommandPacketParent(event:any, id:number){
     this.child.getCommandPacket(id);
   }
}

我希望这可以帮助您解决问题。