Angular2澄清

Question

我有我的第一個角度的應用程序基於快速入門和hero tutorial下面。

所以我app.component處理路由和app.component.html很簡單：

<router-outlet></router-outlet>

我想將導航欄添加到應用程序。我做了一個組件。該navbar.component.html看起來是這樣的：

<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> 
<!-- Brand and toggle get grouped for better mobile display --> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <h3 class="nav-title"><a href="stores">Title</a></h3> 
    </div> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="navbar-collapse collapse" id="navbarCollapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li id="storesNavLink" class="" ><a href="stores">All Stores</a></li> 
       <my-cart></my-cart> 
     </ul> 
    </div> 
</div> 

我應該導航欄添加到我的app.component這樣：

<my-navbar></my-navbar> 
<router-outlet></router-outlet> ? 

這確保了導航欄是每個視圖，但它掩蓋內容來自我的其他組件。

另外，您會注意到，導航欄上有一個購物車<my-cart></my-cart>。

購物車是我創建並放置在導航欄中的組件。

如果購物車位於導航欄中，並且導航欄位於app.component，那麼我將如何使用「添加到購物車」按鈕從products.component向購物車添加東西？

誰在這種情況下是孩子，誰是父母？

該教程很有幫助，但我一直無法找到任何關於不直接與父母/孩子相關的組件之間的通信。

我猜它與服務有關。

Answer 1

我覺得這個語法是正確的。

<my-navbar></my-navbar> 
<router-outlet></router-outlet> 

如果導航欄在每個視圖上都必須放置這樣的組件。 不用擔心將產品添加到購物車中，您可以通過角度2的輸入和輸出（發射器）屬性來完成此操作。 https://angular.io/docs/ts/latest/cookbook/component-communication.html