如何將子組件傳遞給父代兄弟組件？

我想從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，對不起，需要時間，你必須自己探索，我已經解釋了需要的關鍵。 –

如何將子組件傳遞給父代兄弟組件？

回答

相關問題