Angular good practice-显示Recipe Detail、处理Shopping-List

上一篇完成recipe-list的显示后，接下来要针对右半部recipe细节的显示。

这个部分，会有dropdown-list的显示，目前尚未完善，之后会再回头补足功能。

recipe-detail.component.html

<div class="row">  <div class="col-12">    <h1>Recipe Name</h1>  </div></div><div class="row">  <div class="col-12">    <div class="dropdown">      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"        aria-haspopup="true" aria-expanded="false">        Manage Recipe      </button>      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">        <a class="dropdown-item" href="#">To Shopping List</a>        <a class="dropdown-item" href="#">Edit Recipe</a>        <a class="dropdown-item" href="#">Delete Recipe</a>      </div>    </div>  </div></div><div class="row">  <div class="col-12">    Description  </div></div><div class="row">  <div class="col-12">    Ingredients  </div></div>

显示：

shopping-list

shopping-list-compinent.html

<div class="row">  <div class="col-10">    <app-shopping-edit></app-shopping-edit>    <hr>    <div class="list-group">      <a class="list-group-item list-group-item-action" style="cursor: pointer;">123</a>      <a class="list-group-item list-group-item-action" style="cursor: pointer;">123</a>      <a class="list-group-item list-group-item-action" style="cursor: pointer;">123</a>    </div>  </div></div>

显示：