angular 2 md-sidenav 在仪表板中单击时显示列表项答案

【问题标题】：angular 2 md-sidenav display list items on click in the dashboardangular 2 md-sidenav 在仪表板中单击时显示列表项
【发布时间】：2018-06-02 15:47:59
【问题描述】：

我在 Angular 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>

【问题讨论】：

标签： html node.js angular angular2-routing

【解决方案1】：

Angular 中处理这类问题的逻辑非常简单。请按照以下步骤操作：

在您的服务中创建主题：

公共产品$ = 主题(); // 使用模型而不是 {}
在您的 sidenav 组件中注入服务并发出产品数据。

this.service.products$.next(data)
在您的仪表板组件中订阅主题。

this.service.products$.subscribe(data => { console.log(data)});

希望它会有所帮助。

【讨论】：