如何将子组件与父同级组件进行通信? [英] how to communicate child component to parent sibling components?

问题描述

当用户将鼠标悬停在list.component.ts上时，我想显示bucket-modal.component.ts的弹出窗口. list.component.ts与bucket-modal.component.ts之间如何通信?我的代码在这里.

list.component.ts

@Component({    
    selector: 'list',
    templateUrl: 'list.component.html',
    styleUrls: ['list.component.css'],
})

export class ListComponent implements OnInit {
 @Input() state: boolean;
    @Output() toggle = new EventEmitter();
    onHover() {
    this.state = true;
    this.toggle.emit(this.state);
    console.log("state is ----------" + this.state);
    }
    onHoverOut() {
    this.state = false;
    this.toggle.emit(this.state);
    console.log("state is------ " + this.state);
    }
}

list.component.html

<a (mouseover)="onHover()" (mouseleave)="onHoverOut()">random Link list</a>

listdetails.component.ts

@Component({

    selector: 'app-list-detail',
    templateUrl: 'app-list.component.html',
    styleUrls: ['app-list.component.css'],
})


export class ListDetailComponent implements OnInit {


}

listdetails.component.html

<list [elementslist]="listdetails" listingtype="3"></list>
<list [elementslist]="listdetails" listingtype="3"></list>
<list [elementslist]="listdetails" listingtype="3"></list>
<bucket-modal [(showMeaddBucket)]="show2ClickedBucket" [state]="PopUpshow" (toggle)="PopUpshow=$event"></bucket-modal>

bucket-modal.component.ts

@Component({    
    selector: 'bucket-modal',
    templateUrl: 'bucket-modal.component.html',
    styleUrls: ['bucket-modal.component.css'],
})



export class BucketModalComponent implements OnInit {

      @Input() state: boolean;
      @Output() toggle = new EventEmitter();
    onHover() {
        this.state = true;
        this.toggle.emit(this.state);
        console.log("state is " + this.state);
    }
    onHoverOut() {
        this.state = false;
        this.toggle.emit(this.state);
        console.log("state is " + this.state);
    }
}

我认为最简单的方法是在BucketModalComponent中创建一个公共方法，该方法将显示弹出对话框.像

export class BucketModalComponent implements OnInit {
  showDialog(): void {
    // Open the popup dialog
  }
}

然后您可以在listdetails.component.html中调用它:

<list ... (toggle)="modal.showDialog()"></list>
<bucket-modal #modal ... ></bucket-modal>

I want to show the popup from bucket-modal.component.ts when the user mouseover/mouseleave on the list.component.ts. How to communicate between list.component.ts to bucket-modal.component.ts? My code is here.

list.component.ts

@Component({    
    selector: 'list',
    templateUrl: 'list.component.html',
    styleUrls: ['list.component.css'],
})

export class ListComponent implements OnInit {
 @Input() state: boolean;
    @Output() toggle = new EventEmitter();
    onHover() {
    this.state = true;
    this.toggle.emit(this.state);
    console.log("state is ----------" + this.state);
    }
    onHoverOut() {
    this.state = false;
    this.toggle.emit(this.state);
    console.log("state is------ " + this.state);
    }
}

list.component.html

<a (mouseover)="onHover()" (mouseleave)="onHoverOut()">random Link list</a>

listdetails.component.ts

@Component({

    selector: 'app-list-detail',
    templateUrl: 'app-list.component.html',
    styleUrls: ['app-list.component.css'],
})


export class ListDetailComponent implements OnInit {


}

listdetails.component.html

<list [elementslist]="listdetails" listingtype="3"></list>
<list [elementslist]="listdetails" listingtype="3"></list>
<list [elementslist]="listdetails" listingtype="3"></list>
<bucket-modal [(showMeaddBucket)]="show2ClickedBucket" [state]="PopUpshow" (toggle)="PopUpshow=$event"></bucket-modal>

bucket-modal.component.ts

@Component({    
    selector: 'bucket-modal',
    templateUrl: 'bucket-modal.component.html',
    styleUrls: ['bucket-modal.component.css'],
})



export class BucketModalComponent implements OnInit {

      @Input() state: boolean;
      @Output() toggle = new EventEmitter();
    onHover() {
        this.state = true;
        this.toggle.emit(this.state);
        console.log("state is " + this.state);
    }
    onHoverOut() {
        this.state = false;
        this.toggle.emit(this.state);
        console.log("state is " + this.state);
    }
}

解决方案

I think the easiest way is to create a public method in BucketModalComponent which will show the popup dialog. Something like

export class BucketModalComponent implements OnInit {
  showDialog(): void {
    // Open the popup dialog
  }
}

Then you can call it in listdetails.component.html:

<list ... (toggle)="modal.showDialog()"></list>
<bucket-modal #modal ... ></bucket-modal>

这篇关于如何将子组件与父同级组件进行通信?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！