如何将子组件传递给父代兄弟组件？

我想从bucket-modal.component.ts显示弹出当在list.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>

斗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); 
    } 
}

来源

2017-10-11 vel

我认为最简单的方法是创建一个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>

来源

2017-10-11 08:48:16

我想通过id来斗模型组件。怎么做？ – vel

你可以实现'showDialog（）'方法来接受一个参数 - 这个ID。 –

未调用showDialog对话框。 'showDialog（）：void { console.log（“test”）; }' – vel

让我们看看我有这样的组件，

// Components 
-parent 1 
    - child 11 
-parent 2 
    - child 21 
-parent 3 
    - chils 31 

// NgModule 
- NgModule 
    -> that has all these components 
    -> Provider : CommonService

现在我想通过从孩子11到数据所有父（1,2,3）

在这种情况下，你需要的服务，而该服务东东DS是在模块级e.g CommonService 现在，所有你需要做的就是在要访问这些数据这些组件注入该服务。

您还可以在CommonService和FireItFrom child11 中创建eventEmitter，并在所有父组件中订阅该eventEmitter。

来源

2017-10-11 09:09:35

你能用最少的代码创建一个plunkr吗？ – vel

@vel，对不起，需要时间，你必须自己探索，我已经解释了需要的关键。 –

如何将子组件传递给父代兄弟组件？

回答

相关问题