Angular :如何从数据库数据(Asp net核心Web API数据)在angular中创建动态菜单
我正在使用angular 11。我没有在angular中创建动态菜单的任何想法。
实际上，我已经在数据库中创建了两个表(即MainMenu和subMenu)。我必须在.net核心创建一个aspnet核心web应用程序接口，并希望绑定aspnet核心web api数据到角度意味着要创建一个动态菜单角度从aspnet核心web api数据。
回答 1
Stack Overflow用户
发布于 2021-07-03 18:52:17
这是一个宽泛的问题，你给了我们很少的线索。因此，我简单地指出了一个“通用方法”。
1.-在互联网上查找你喜欢的菜单/子菜单，例如我在this link中找到的第一个(我找到了第一个)。你可以找一个侧面导航菜单或任何你想要的东西。一般来说，这是一种阻碍：
<div id="header">
<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">Services</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">About</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a></li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</div>2.-考虑变量、数组和对象。并尝试使用变量重新创建
您可以看到，菜单"item“有一个label和href，所以或多或少是{label:"...",href:"..",children:[...]}，是的，子项是这个对象的简单数组。想象一下像这样的
menu=[
{href:"",label:"Home"},
{href:"",label:"Servicios",children:[
{href:"",label:"Submenu1"},
{href:"",label:"Submenu2"},
{href:"",label:"Submenu3"},
{href:"",label:"Submenu4",children:[
{href:"",label:"Submenu1"},
{href:"",label:"Submenu2"},
{href:"",label:"Submenu3"},
{href:"",label:"Submenu4"}
]},
]},
{href:"",label:"About",children:[
{href:"",label:"Submenu1"},
{href:"",label:"Submenu2"},
{href:"",label:"Submenu3"},
{href:"",label:"Submenu4"}
]},
{href:"",label:"Contact"}
]我们可以想象显示这个对象usign *ngFor和*ngIf。在Angular中，我们不使用href或routerLink
<div id="header">
<ul class="nav">
<li *ngFor="let item of menu">
<a [routerLink]="item.href">{{item.label}}</a>
<ul *ngIf="item.children">
<li *ngFor="let submenu of item.children">
<a [routerLink]="submenu.href">{{submenu.label}}</a>
<ul *ngIf="submenu.children">
<li *ngFor="let submenu2 of submenu.children">
<a [routerLink]="submenu2.href">{{submenu2.label}}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>我们可以考虑制作一个“递归”组件或符合这“三个层次”。制作一个递归组件并不难，你可以看到this SO
@Component({
selector: '[recursive]',
template: `
<li *ngFor="let item of children">
<a [routerLink]="item.href">{{item.label}}</a>
<ul recursive *ngIf="item.children"
[children]="item.children"
[parent]="self"
[level]="level!=undefined?level+1:0">
</ul>
</li>
`,
})
export class MenuItemComponent {
@Input() level: number;
@Input() label: string;
@Input() children: any[];
@Input() parent: any;
self=this;
}我们的.html就像
<div id="header">
<ul class="nav" recursive [children]="menu"></ul>
</div>3.-创建对象。我们已经准备好显示菜单了，现在是时候使用表创建对象" menu“了
像往常一样，tipical我们有一个获取table菜单和table子菜单的服务。
/*Imagine return an array like
[{id:1,label:...,href:...},
{id:2,label:...,href:...}..]
*/
getMenu()
{
return this.http.get("myApi/menu");
}
/*Imagine return an array like
[{id:1,label:...,href:...,menuId:1},
{id:2,label:...,href:...,menuId:1}..]
*/
getSubMenu()
{
return this.http.get("myApi/submenu");
}因此，我们可以创建一个新函数来获取两个表，并返回我们的对象"menu“
getObjectMenu() {
return forkJoin([this.getMenu(), this.getSubMenu()]).pipe(
map(([menu, submenu]: [any[], any[]]) => {
return menu.map((x: any) => ({
...x,
children: submenu.filter(s => s.menuId == x.id)
}));
})
);
}查看forkJoin在一个可观察数组中创建一个可观察对象。我们在"menu，submenu“中获得了两个表，并创建了子菜单映射-一个新对象是表"menu”加上一个包含menuId==x.id的子菜单的附加属性“-using
4.-在Angular应用程序中使用我们的服务。现在，我们可以在ngOnInit中订阅服务并为变量赋值
constructor(private menuService:MenuService){}
ngOnInit()
{
this.menuService.getObjectMenu().subscribe(res=>{
this.menuData=res
})
}并使用
<div id="header">
<ul class="nav" recursive [children]="menuData"></ul>
</div>或者，当我们的service.getObjectMenu()返回一个observable时，我们可以使用管道异步
<div id="header">
<ul class="nav">
<!--see that use menuService.getObjectMenu()|async-->
<li *ngFor="let item of menuService.getObjectMenu()|async">
<a [routerLink]="item.href">{{item.label}}</a>
<ul *ngIf="item.children">
...
</ul>
</div>//或使用递归
<div id="header">
<ul class="nav" recursive [children]="menuService.getObjectMenu()|async">
</ul>
</div>更新嗯，真的是一个“糟糕的设计”来获得一个“菜单”和“子菜单”的表格，
5.-通常情况下，以{ id: .., href:.., label: .., menuId: .. }的方式每个元素只能获得一个唯一的表
如果menuId=0是一个菜单，否则就是一个子菜单。所以我们可以想象一个函数
getAllMenu()()
{
return this.http.get("myApi/menu");
}如何创建我们的对象"menuObject“。作为一个递归，你需要记住你应该有一个被称为自身的函数。好的，e可以有一个函数
getObjectMenu() {
return this.getAllMenu().pipe(
map((menu: any[]) =>
menu.filter(x=>!x.menuId).map(x => ({
...x,
children: this.getChildren(menu,x.id) //<--here call to function
}))
)
);
}
getChildren(menu:any[],id:number){
return menu.filter(x=>x.menuId==id).map((x:any)=>{
return ({
...x,
children:this.getChildren(menu,x.id) //<--see the function is called to itself
})}
)
}看看我们所有的angular应用程序都能正常工作，唯一的改变就是更改"service“
https://stackoverflow.com/questions/68233888
复制相似问题
腾讯云开发者
