我有两个不同的组件:component1和component2以及service1。
当我使用service(service!),我正在设置服务中的perticula productid。
我想使用perticular productid使component2(products组件)中的tab(产品列表表示为tabs)处于活动状态。
我能得到任何帮助来完成这个任务吗?
我只使用引导标签。
家庭组件模板:

 <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');
 }

产品组件模板:
<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);
      }));
   }

最佳答案

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

关于angular - 将标签页动态设置为事件状态,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57987702/

10-09 20:27
查看更多