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

Question

我有两个不同的组件 - 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" alt="Place image title" *ngIf="!isImageLoading; else noImageFound">
        <ng-template #noImageFound>
          <img src="assets/img/fallbackImage.png" alt="Fallbackimage">
        </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);
      }));
   }

Answer 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}。使用样式化的锚链接将使最终用户可以右键单击并在新的浏览器选项卡中打开