以下の図のように、角度2のサイドバーのナビゲーションメニューを作成しました。角度2 md-sidenavダッシュボードのクリック時のリスト項目表示
UPDATE:
しかし、私は、カテゴリリストにリンクをクリックしたとき、私は、クリックされたカテゴリに関連するすべての製品を取得します。しかし、それはダッシュボードの右側に表示されていません。製品を表示する
私のロジックは、別のコンポーネントである:dashboard.component.html
<div id="products" class="row list-group">
...
</div>
しかし、サイドバーの項目をクリックするだけで(サイドバーコンポーネントから)、どこに置くするイムわかりませんdivより上にあるので、ダッシュボード領域のクリックに基づいてすべての商品がフィルタリングされます。基本的
iが(一つの成分から:サイドバー、別のコンポーネントから機能:ダッシュボードと呼ばれるべきである)getProductsをonclickの
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>