Angular中的动态标签：在动态标签内容中导航

Question

I'm developing a demo app that contain a search bar, and with each search action a tab should be opened.

I succeeded to do that following this awesome article https://juristr.com/blog/2017/07/ng2-dynamic-tab-component/

The requirement is that each dynamic tab has his own context as the following images show

Now inside the tab content I need to have navigation between different components.

I don't think that routing can be used, because as I mentioned, each tab has his own context.

what is the appropriate way to do so? Any tutorials, any hint, or a place to start from would be very helpful ( I'm a beginner with angular )

Answer 1

Ok. If i understand correctly i think this could be one approach.

I tried to thik at something simple...

In you tab content you write the html code like this:

<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>

In your typescript file you can keep the state of the content to show through a boolean variable, in this case i used showDetail . Then at the click of an item of the list you switch this variable, so the content will be shown.

You component should have a function like this:

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

     showDetail = true
  }

Don't forget to have a "go back" button or something like that, so you can set showDetail = false and return to the previous list

More complex way

If you are not already using <router-outlet> you can place it inside the tab content. Then you create two components (one for displaying the list anc one for the detail) and then you navigate through them using routing. For details on routing see: https://angular.io/guide/router#defining-a-basic-route