角度2 md-sidenav显示列表项目，点击仪表板

Question

我已经创建了一个带有角度2的侧边栏导航菜单，如下图所示。

https://imgur.com/a/hj4zO

更新：

但是，当我点击类别列表中的链接时，我会获得与点击类别相关的所有产品。但它没有显示在仪表板的右侧。

我显示产品的逻辑是另一个组件：dashboard.component.html

<div id="products" class="row list-group">
     ...
</div>

但是点击侧边栏中的项目（来自侧边栏组件），我不知道在哪里放置上面的div，所以我根据点击到我的仪表板区域过滤所有产品。

基本上当我点击getProducts时（来自一个组件：侧栏，来自另一个组件的功能：应该调用仪表板）

sidenav.component.html

<md-sidenav-container fullscreen>
    <md-sidenav #sidenav mode="side" class="example-sidenav" [ngStyle]="{ 'width.em': sidenavWidth }" opened="true" (mouseover)="increase()"
(mouseleave)="decrease()">
    <md-nav-list>
      <md-list-item routerLinkActive="active">
        <md-icon md-list-icon>room_service</md-icon>
        <div fxFlex="10"></div>
        <div *ngIf="sidenavWidth > 6" class="sidenav-item">
          <p class="lead">Smiles 4 abc </p>
              <div class="catList" id="catList">
              <a *ngFor="let cat of categories; let i = index" href="javascript:; " class="list-group-item " (click)="getProducts(cat._id,i)">{{cat.category_name}}</a>
              </div>
        </div>
      </md-list-item>
    </md-nav-list>
  </md-sidenav>
  <div class="example-sidenav-content">
    <router-outlet></router-outlet>
  </div>
</md-sidenav-container>

sidenav.component.ts

ngOnInit() {
this.qty[1]=1;
this.catService.getMaincategories('Yes').subscribe(
       (mainCategories) => {

      this.categories = mainCategories.mainCategories
      let firstCatId = this.categories[0]._id;
      this.getProducts(firstCatId,0)
      }
      );

    this.navbar.ngOnInit();
 }

getProducts(category_id, i) { 
console.log('prod clicked..');
this.productService.getProductsOncategory(category_id).subscribe(
  (products) => {
    this.products = products.products
      }
    );
  }

product.service.ts

getProductsOncategory(category_id){
  let catUrl=this.domain+"products/getProductsOncategory"
  let headers = new Headers();
  headers.append('Content-Type','application/json');
  let catIdObj = JSON.stringify({category_id:category_id,product_status:'Yes'})   
  return this.http.post(catUrl,catIdObj,{headers:headers})
  .map((response:Response)=>response.json())
  .catch(this.handleError);
}

app.component.html

<sidenav></sidenav>

Answer 1

在Angular中，逻辑非常简单，可以解决这些类型的问题。请遵循以下步骤：

1. 在您的服务中创建主题： 公共产品$ =主题<{}>（）; //使用模型而不是{}
2. 在sidenav组件中注入服务并发出产品数据。 this.service.products $。接下来（数据）
3. 在仪表板组件中订阅主题。 this.service.products $ .subscribe（data => {console.log（data）}）;

希望它会有所帮助。