如何在 Angular 5/4 中为不同类型的用户使用不同的导航栏?
how to use different navbar for different type of user in Angular 5/4?
我正在开发我在 github 上找到的 Angular5 免费模板。它只包含一个导航栏,但就我而言,我有两种类型的用户(管理员和经理),它们根本没有相同的导航栏。我该如何解决这个问题?如何将它们中的每一个重定向到不同的导航栏?
模板是这样的:
在此图片中,您可以看到文件 app-sidebar-nav.component.html 使用包含导航栏的文件 _nav.ts。
这是文件 _nav.ts
我想添加另一个名为 _nav2.ts 的文件,管理员将在身份验证后看到该文件,这是不同的。 _nav.ts 将是管理员在身份验证后看到的结果。
在目录 views/pages 中,我有一个名为 login.component.ts 和 login.component.html
的文件
编辑:
这是文件authentication.service.ts
@Injectable()
export class AuthenticationService{
private host:string="http://localhost:8080";
private jwtToken=null ;
private roles:Array<any>;
private user:string;
constructor(private http:HttpClient){
}
login(user){
return this.http.post(this.host+"/login",user,{observe: 'response'});
}
getToken(){
return this.jwtToken;
}
isAdmin(){
for(let r of this.roles){
if(r.authority=='ADMIN') return true;}
return false;
}
isManager(){
for(let r of this.roles){
if(r.authority=='MANAGER') return true;}
return false;
}
}
您必须在 AppSidebarNav
class 上添加一个可以是 admin
或 manager
的输入 属性 userType
,稍微更改您的导入,例如:
import {navigation as adminNav} from './../../_nav';
import {navigation as managerNav} from './../../_nav2';
并在 class 中添加一个方法,根据输入 returns 正确的信息:
class AppSidebarNav {
@Input() userType = 'admin';
get navItems(): any[] {
return this.userType === 'admin' ? adminNav : managerNav;
}
}
同时更新您的导航模板以使用 navItems
而不是 navigation
(因此它会跳转到新方法)。
然后您需要更新包含此 app-sidebar-nav
的模板以添加新的 userType
属性,如下所示:
<app-sidebar-nav [userType]="isAdmin ? 'admin' : 'manager'"></app-sidebar-nav>
我正在开发我在 github 上找到的 Angular5 免费模板。它只包含一个导航栏,但就我而言,我有两种类型的用户(管理员和经理),它们根本没有相同的导航栏。我该如何解决这个问题?如何将它们中的每一个重定向到不同的导航栏?
模板是这样的:
在此图片中,您可以看到文件 app-sidebar-nav.component.html 使用包含导航栏的文件 _nav.ts。
这是文件 _nav.ts
我想添加另一个名为 _nav2.ts 的文件,管理员将在身份验证后看到该文件,这是不同的。 _nav.ts 将是管理员在身份验证后看到的结果。
在目录 views/pages 中,我有一个名为 login.component.ts 和 login.component.html
的文件编辑:
这是文件authentication.service.ts
@Injectable()
export class AuthenticationService{
private host:string="http://localhost:8080";
private jwtToken=null ;
private roles:Array<any>;
private user:string;
constructor(private http:HttpClient){
}
login(user){
return this.http.post(this.host+"/login",user,{observe: 'response'});
}
getToken(){
return this.jwtToken;
}
isAdmin(){
for(let r of this.roles){
if(r.authority=='ADMIN') return true;}
return false;
}
isManager(){
for(let r of this.roles){
if(r.authority=='MANAGER') return true;}
return false;
}
}
您必须在 AppSidebarNav
class 上添加一个可以是 admin
或 manager
的输入 属性 userType
,稍微更改您的导入,例如:
import {navigation as adminNav} from './../../_nav';
import {navigation as managerNav} from './../../_nav2';
并在 class 中添加一个方法,根据输入 returns 正确的信息:
class AppSidebarNav {
@Input() userType = 'admin';
get navItems(): any[] {
return this.userType === 'admin' ? adminNav : managerNav;
}
}
同时更新您的导航模板以使用 navItems
而不是 navigation
(因此它会跳转到新方法)。
然后您需要更新包含此 app-sidebar-nav
的模板以添加新的 userType
属性,如下所示:
<app-sidebar-nav [userType]="isAdmin ? 'admin' : 'manager'"></app-sidebar-nav>