Angular 2中的不同模塊組件通信

我有一個組件，我希望它將數據傳遞給另一個模塊中的另一個組件。其實我的app.component是這些兒童模塊的父母。我希望每個子模塊都能發送一些數據到app.component。但他們只是在路由選擇的時候纔是孩子和父母。所以他們實際上並不是父母和孩子，我想。Angular 2中的不同模塊組件通信

我的意思是，我的app.component模板看起來是這樣的：

<div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav navbar-left"> 
     <li><a routerLink="link1" routerLinkActive="active">Page1</a></li> 
     <li><a routerLink="link2" routerLinkActive="active">Page2</a></li> 
     <li><a routerLink="link3" routerLinkActive="active">Page3</a></li> 
     <li><a routerLink="link4" routerLinkActive="active">Page4</a></li> 
    </ul> 
    </div> 
</nav> 
<div *ngIf="needsSidebar" id="sidebar">some content</div> 
<div> 
    <router-outlet></router-outlet> 
</div>

所以app.component與這些模塊和組件他們沒有直接的聯繫。我試圖使用Output，但由於組件來自不同的模塊，所以它失敗了。我迷失在我該做什麼。我希望我的「孩子」模塊能夠發送數據到app.module，告訴它是否需要側邊欄以及側邊欄應顯示哪些內容。我該怎麼做？

來源

2016-10-10 K.Rice

模塊如何關聯並不重要。重要的是，如果組件是組件視圖中的子組件。在這種情況下，您可以使用Angulars綁定語法。在其他情況下使用共享服務。有關詳細信息，請參閱https://angular.io/docs/ts/latest/cookbook/component-communication.html

重要的是，您將共享服務添加爲提供程序的位置。如果將其添加到組件中，則只有此組件的實例及其子代和後代共享此服務實例。如果您將服務添加到@NgModule()的提供程序中，則單個實例將與整個應用程序共享（對於非延遲加載的模塊）。

來源

2016-10-10 09:07:53

我試圖使用Angular綁定與輸出，但我沒有在我的HTML中的任何選擇器，我只有'router-outlet'，我怎麼能通過一個事件？當我嘗試使用選擇器命令來測試它時，我得到了這個錯誤：'zone.js：355未處理的Promise拒絕：模板解析錯誤： 'child-selector'不是已知的元素：' –

子組件需要被添加到位於'declarations：[]'中的'NgModule'的'exports：[]'中，並且當前的'NgModule'需要在'imports：[]'中有另一個模塊。然後用'>綁定應該可以工作。對於由路由器添加的組件，不支持綁定。對於這種情況，您需要使用共享服務。 –

謝謝，那麼我想，共享服務就是爲了我。 –

對於這種情況，你可以看看sharedModule。 SharedModule股services,pipes & etc，你想在不同的模塊/組件。

來源

2016-10-10 09:11:51 micronyks

Angular 2中的不同模塊組件通信

回答

相關問題