动态设置选项卡处于活动状态

Posted 2023-02-27

【中文标题】动态设置选项卡处于活动状态

【英文标题】：Set the tab active dynamically

【发布时间】：2020-01-19 02:41:28

【问题描述】：

我有两个不同的组件 - Component1 和 Component2 以及一个 Service1。

当我使用服务（服务！）在 Component1（HomeComponent）中单击一个图像（产品列表中的一个产品）时，我在服务中设置了特定的 productId。

我想使用特定的 productId 使选项卡（产品列表表示为选项卡）在 Component2（产品组件）中处于活动状态。

我可以得到任何帮助来完成这项工作吗？

我只使用引导选项卡。

HomeComponent 模板：

 <div class="icon center-content" 
     (click)="getProductInfo(productsCategory.ProductCategoryID)">
      <img class="cat-image mb-4" [src]="productsCategory.ImagePath"  *ngIf="!isImageLoading; else noImageFound">
        <ng-template #noImageFound>
          <img src="assets/img/fallbackImage.png" >
        </ng-template>
 </div>

主页组件：

getProductInfo(id)
console.log(id);
this.appService.getProductInfoHome(id);
this.router.navigateByUrl('home/products');
 

ProductComponent 模板：

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
  <a id="tab-A" [routerLink]="['#pane-A']" routerLinkActive="router-link-active" [class.active]="tab == 'tab-A'"     class="nav-link" data-toggle="tab" role="tab">Product One</a>
</li>
<li class="nav-item">
  <a id="tab-B" [routerLink]="['#pane-B']" routerLinkActive="router-link-active" [ngClass]="'active': tab == 'tab-B'"  class="nav-link" data-toggle="tab" role="tab">Product Two</a>
</li>

产品组件：

//To get the tab details 
getTabDetails() 
      this.tab = this.appService.setActiveTab();



ngOnInit() 
//Stores the product ID from service
this.selectedProductID = this.appService.getProductID();
console.log(this.selectedProductID);

//Will call API and subscribes in the 
this.appService.getProductInfoHome(this.selectedProductID);
this.tab = this.appService.getActiveTab();
console.log(this.tab);
this.products = this.appService.firstProductData;
console.log(this.products);

应用服务：

  //set Id
   setProductID(id) 
    this.selectedId = id;
  

  //Get ID
  getProductID()
     return this.selectedId;
   

   //Get Product Info from home
  getProductInfoHome(id)
     this.getProductInfoById(id).subscribe(
     data=>
       this.firstProductData = data;
       console.log(this.firstProductData);
       if(this.firstProductData)
       this.setActiveTab();
       console.log(this.selectTab);
      
    ,
     error=>
        console.log(error);
    
   )
  

 //To set the tab active
  setActiveTab(): any 
   for (let cat of prodConfig.productCategory) 
     if (cat.ProductCategoryID === 
         this.firstProductData.ProductCategoryID) 
          this.selectTab = cat.ProductTabID;
       
     
   

  //To get the active tab
   getActiveTab():any
       if(this.selectTab)
       return this.selectTab;
    


 //To get the product type and products byId
  getProductInfoById(productId) 
     const data = 
         productCategoryId: productId
      ;
     const httpOptions = 
         headers: new HttpHeaders(
           'Content-Type':  'application/json'
        )
      ;
      const reqData = JSON.stringify(data);


     return 
      this.http.post('/api/product/getinfobyid', reqData, 
     httpOptions).pipe(
       catchError((error: HttpErrorResponse) => 
        if (error.error instanceof ErrorEvent) 
        // A client-side or network error occurred. Handle it 
         accordingly.
        console.error('An error occurred:', error.error.message);
       else 
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.log(error.error);
       
       return observableThrowError(error.error);
      ));
   

【问题讨论】：

在此处添加一些代码，您到目前为止尝试过的内容以及代码的外观

请提供一些代码。

已经添加了代码，我尝试到现在。

【参考方案1】：

Bootstrap Tabs 是一个 javascript 选项卡。它不支持浏览器中的后退按钮。切换选项卡时不会路由。如果您将选项卡视为水平菜单，则可以让每个选项卡代表一个页面。结帐：

https://www.freakyjolly.com/angular-nested-routing-with-multiple-routeroutlet-using-loadchildren-having-own-router-modules-example-application/

部分：在每个级别添加 RouterOutlet 指令。

您可以创建一个路线：.../products/id。这将显示一个包含产品信息的页面。您可以将其添加为书签，将其作为邮件中的链接发送等等。在您的产品页面中，路由：..../products。您将获得产品列表并在水平样式上循环：

<ul class="list-unstyled list-inline">
    <li *ngFor="let product of products">
    <a routerLink="/products/product.Id">product.Name</a>
    </li>
</ul>

标签将路由到产品/id。使用样式化的锚链接将使最终用户可以右键单击并在新的浏览器选项卡中打开

【讨论】：

由于我在每个选项卡上使用 Boostrap 手风琴，所以我必须显示每种产品类型的数据和该产品类型中的产品列表，这就是我需要显示所有产品类型的原因在单个组件/模块中。

有没有其他方法可以在单个组件中做到这一点。

我认为你需要给我发一张你所拥有的图片。我不明白你的 html 应该是什么样子