В настоящее время я разрабатываю свой первый сайт Angular 2. На сайте есть Bootstrap NavBar с левой стороны, чтобы пользователь мог перейти на разные страницы сайта. Каждый пользователь может видеть различные навигационные кнопки в NavBar в зависимости от их разрешений безопасности.Лучшая практика в Angular2 для отображения кнопок на основе разрешений безопасности пользователей
На данный момент я только что издевался над ним, чтобы они действовали так, как если бы кнопки были извлечены из БД в массив. Затем каждая кнопка отображается в NavBar, обводя вокруг массива. См. Код ниже.
Вопросы
Это работает, но это лучший способ сделать это?
Есть ли лучший способ наилучшей практики для извлечения настроек из БД на основе разрешений безопасности пользователей и отображения этих параметров?
И есть ли что-нибудь еще, что мне нужно, чтобы сделать его более ?
navbar.component.heml
<div class="nav-side-menu">
<div class="brand">NavBar</div>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li *ngFor="let appButton of appButtons">
<a href="#">
<i class="{{appButton.buttonClass}}"></i> {{appButton.displayName}}
</a>
</li>
</ul>
</div>
</div>
navbar.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
constructor() { }
ngOnInit() {
}
// Hard coded in at the moment, but these settings
// will be retrieved from the DB
appButtons = [
{ displayName: "Dashboard", buttonClass: "fa fa-dashboard fa-lg" },
{ displayName: "Gift", buttonClass: "fa fa-gift fa-lg" },
{ displayName: "Globe", buttonClass: "fa fa-globe fa-lg" },
{ displayName: "Search", buttonClass: "fa fa-search fa-lg" }
];
}