2016-09-13 3 views
0

나는 빠른 시작을 기반으로 한 첫 번째 모서리 모양의 응용 프로그램과 다음에 나오는 hero tutorial을 사용합니다.Angular2 설명

그래서 내 app.component 라우팅을 처리하고 app.component.html는 간단하다 :

<router-outlet></router-outlet>

내가 응용 프로그램에 네비게이션 바을 추가 할 수 있습니다. 나는 구성 요소를 만들었습니다. navbar.component.html은 다음과 같습니다

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

이 네비게이션 바에는 모든보기에 보장하지만 내용을 가린다 :

<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에 네비게이션 바에을 추가해야 내 다른 구성 요소에서.

또한 navbar에 카트가 있습니다 (<my-cart></my-cart>).

카트는 내가 생성하여 navbar에 넣은 구성 요소입니다.

카트가 탐색 바에 있고 navbar가 app.component 인 경우, "장바구니에 추가"버튼이있는 products.component에서 장바구니에 항목을 추가하는 방법은 무엇입니까?

누가이 경우 자녀이며 누가 부모입니까?

이 자습서는 도움이되었지만 부모/자녀와 직접적으로 관련이없는 구성 요소 간의 통신에 대해서는 아무 것도 찾을 수 없었습니다.

나는 서비스와 관련이 있다고 생각합니다.

답변

0

이 구문이 올바른 것 같습니다.

네비게이션 막대가 모든보기에 있으면이 같은 구성 요소를 넣어야합니다. 카트에 제품을 추가하는 것에 대해 걱정하지 마십시오. 각도 2의 입력 및 출력 (이미 터) 속성으로 수행 할 수 있습니다. https://angular.io/docs/ts/latest/cookbook/component-communication.html

+0

감사합니다. 나는 그 정보를 찾고 있었다. 요리 책을 보려고 내게 일어난 일은 결코 없을 것입니다. 그렇다면 Navbar가 다른 컴포넌트 컨텐츠를 숨기는 이유는 무엇입니까? – MayNotBe

+0

죄송합니다. –