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

Angular2澄清

1 个答案: