0
아래의 그림과 같이 각도 2에서 사이드 바 탐색 메뉴를 만들었습니다.각도 2 md-sidenav 대시 보드에서 클릭하면 목록 항목이 표시됩니다.
UPDATE :
하지만 난이 카테고리 목록에서 링크를 클릭하면, 내가 클릭 한 카테고리에 관련된 모든 제품을 얻을. 하지만 대시 보드에서 오른쪽에 표시되지 않습니다. dashboard.component.html
<div id="products" class="row list-group">
...
</div>
그러나 (사이드 바 구성 요소에서) 사이드 바의 항목의 클릭에, 메신저가 어디에 있는지 넣어하지 :
제품을 표시하는 내 논리는 다른 구성 요소에 div보다 위에 있으므로 모든 대시 보드를 클릭하여 필터링 된 제품을 얻을 수 있습니다. 난 getProducts를 온 클릭시
기본적
<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
sidenav.component.html (: 사이드 바의 다른 구성 요소의 기능을 하나의 구성 요소에서 대시 호출한다). 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>