NgxPermissions 不适用于延迟加载模块

Question

在我的项目中添加ngx-permissions时，出现编译错误。我的代码包含多个延迟加载模块，每个模块都使用 *ngxPermissionsOnly

尝试在主应用模块和子布局模块中导入 NgxPermissionsModule、NgxPermissionsModule.forRoot()、NgxPermissionsModule.forChild()，但没有任何效果。

代码片段： app.module.ts

import { AuthService } from './../services/auth.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './shared';
import { NgxPermissionsModule, NgxRolesService } from 'ngx-permissions';

@NgModule({
    imports: [
        HttpModule,
        CommonModule,
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        AppRoutingModule,
        FormsModule, ReactiveFormsModule,
        NgxPermissionsModule.forRoot()
    ],
    exports: [CommonModule],
    declarations: [AppComponent],
    providers: [AuthGuard, AuthService],
    bootstrap: [AppComponent]
})
export class AppModule {}

layout.module.ts

import { NgxPermissionsModule, NgxRolesService } from 'ngx-permissions';
import { CommonModule } from '@angular/common';
import { LayoutRoutingModule } from './layout-routing.module';
import { LayoutComponent } from './layout.component';
import { SidebarComponent } from './components/sidebar/sidebar.component';
import { HeaderComponent } from './components/header/header.component';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        LayoutRoutingModule,
        NgxPermissionsModule.forChild(),
    ],
    declarations: [LayoutComponent, SidebarComponent, HeaderComponent],
    providers: [AutoLogoutService]
})
export class LayoutModule {}

profile.module.ts

import { NgxPermissionsModule } from 'ngx-permissions';
import { ProfileComponent } from './profile.component';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ProfileRoutingModule } from './profile-routing.module';
import { PageHeaderModule } from '../../shared';

@NgModule({
    imports: [
        CommonModule,
        ProfileRoutingModule,
        PageHeaderModule,
        FormsModule,
        ReactiveFormsModule,
        NgxPermissionsModule.forChild(),
    ],
    exports: [CommonModule],
    declarations: [ProfileComponent]
})
export class ProfileModule {}

layout.component.ts - 此文件加载权限数组。

constructor(
        public authService: AuthService,
        public router: Router,
        private ngxRolesService: NgxRolesService,
        private location: Location,
        private ngxPermissionsService: NgxPermissionsService,
      ) {
        this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
        const permArray = new Array();
        const role = this.currentUser.roles;
        role.forEach(element => {
          const permission = element.permissions;
          permission.forEach(obj => {
            this.ngxPermissionsService.addPermission(obj.permissionName);
            permArray.push(obj.permissionName);
          });
        });

        this.ngxRolesService.addRole('current-user-role', permArray);
        this.ngxPermissionsService.loadPermissions(permArray);
        localStorage.setItem('lastAction', Date.now().toString());
        console.log('Last Action Time -- ' + localStorage.getItem('lastAction'));
        console.log('Permissions Array -- ' + permArray);
      }

请告诉我如何解决错误。

更新： 使用 Marius answer 解决了编译问题。但是 ngx-permissions 功能既不适用于使用 NgxPermissionsGuard 的路由，也不适用于使用 *ngxPermissionsOnly

的元素

布局-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: LayoutComponent,
        children: [
            { path: '', redirectTo: 'profile', pathMatch: 'prefix' },
            {
                path: 'profile',
                loadChildren: './profile/profile.module#ProfileModule',
                canActivate: [NgxPermissionsGuard],
                data: {
                    permissions: {
                        only: 'abcd',
                        redirectTo: '/exceptions'
                    }
                }
            },
         ]
       }
    ];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class LayoutRoutingModule {}

profile.component.html 我的权限数组包含使用

添加到 ngxpermissions 的权限 'change-password-self'

this.ngxRolesService.addRole('current-user-role', permArray);
this.ngxPermissionsService.loadPermissions(permArray);

和profile.component.html包含 <button *ngxPermissionsOnly="['change-password-selfish']" class="btn btn-sm btn-primary" (click)="togglePasswordView()">Change Password</button> 所以，这个按钮不应该显示，但它仍然可见。

Answer 1

app.module.ts 进口：[...NgxPermissionsModule.forRoot()...]

无需在导出中添加 NgxPermissionsModule

layout.module.ts 进口：[...NgxPermissionsModule.forChild()...]

profile.module.ts 进口：[...NgxPermissionsModule.forChild()...]

".." 是您拥有的其他导入。

如果这对您不起作用，post 请指出错误。

NgxPermissions 不适用于延迟加载模块

NgxPermissions not working with Lazy Loaded Module

permissions

lazy-loading

angular

angular6