Question

在下面的代码中，我开发了可重用的弹出窗口。我有2个按钮和2个子弹出组件元素。当我点击弹出窗口模式1我想打开模态1弹出窗口，当我点击模态2弹出窗口时，我想打开第二个弹出窗口。

我正在应用的逻辑是将Clickal函数的Modal 1 id发送为

请帮助或建议正确的方法，因为我是新手。

// Parent Component
export class ParentComponent implements OnInit {
tableData: any;
selectedTab: any = 'myRequisitions';
@ViewChild(PopupComponent) PC: PopupComponent;

open(i) {
    this.PC.open(i);
  }

  close(i) {
    this.PC.close(i);
  }

// child popup component

export class PopupComponent implements OnInit {

showPopup = false;
  constructor(private elRef: ElementRef) {}

  ngOnInit() {
    console.log(this.elRef.nativeElement.id);

  }

  open(i) {
    console.log(i); // get modal 1 and modal 2 values
    this.showPopup = true;
  }

  close(i) {
    this.showPopup = false;
  }

<!-- ParentComponent  Start -->

<parent>

<!-- popup child 1 -->
<button (click)="open('modal1')">Open Modal 1</button>
<app-popup id="modal1">Modal 1</app-popup>


<!-- popup child 1 -->
<button (click)="open('modal2')">Open Modal 2</button>
<app-popup id="modal2">Modal 2</app-popup>

</parent>

<!-- ParentComponent End -->


<!-- PopupComponent Start -->

<div class="background" *ngIf="showPopup" #popup>

  <div class="content">
      <ng-content></ng-content>
  </div>

</div>

<!-- PopupComponent  End -->

Angular 2处理孤立的子组件

0 个答案: