Angular中的動態標簽：在動態標簽內容中導航

Question

我正在開發一個包含搜索欄的演示應用程序，每個搜索操作都應打開一個選項卡。

在這篇很棒的文章https://juristr.com/blog/2017/07/ng2-dynamic-tab-component/之后，我成功地做到了這一點

要求是每個動態選項卡都有自己的上下文，如下圖所示

現在在選項卡內容中，我需要在不同組件之間進行導航。

我不認為可以使用路由，因為正如我提到的，每個選項卡都有自己的上下文。

這樣做的適當方法是什么？ 任何教程、任何提示或起點都會非常有幫助（我是 angular 的初學者）

Answer 1

行。 如果我理解正確，我認為這可能是一種方法。

我試着想一些簡單的事情......

在您的選項卡內容中，您可以像這樣編寫 html 代碼：

<div class="listContent" *ngIf="showDetail==false">
<!-- Populate this list as you are doing -->
<ul>
    <li>List</li>
    <li>Of</li>
    <li>Items</li>
</ul>
</div>

<div class="detailContent" *ngIf="showDetail==true">
  <!-- Put here the detail to show after the item click -->
</div>

在您的 typescript 文件中，您可以保留內容的 state 以通過 boolean 變量顯示，在本例中我使用了showDetail 。 然后在單擊列表中的一個項目時切換此變量，以便顯示內容。

你的組件應該有一個 function 這樣的：

  showDetail: boolean = false;
  
  switchContent(){
     //Set here all the variables
     // and the content you want to show

     showDetail = true
  }

不要忘記有一個“返回”按鈕或類似的東西，這樣你就可以設置showDetail = false並返回到上一個列表

更復雜的方式

如果您還沒有使用<router-outlet>您可以將它放在選項卡內容中。 然后創建兩個組件（一個用於顯示列表，一個用於顯示詳細信息），然后使用路由在它們之間導航。 有關路由的詳細信息，請參閱： https://angular.io/guide/router#defining-a-basic-route