NgxPermissions не работает с Lazy Loaded Module - PullRequest
Новая
       14

NgxPermissions не работает с Lazy Loaded Module

0 голосов
/ 15 октября 2018

При добавлении ngx-разрешений в мой проект происходит ошибка компиляции.Мой код содержит несколько модулей с отложенной загрузкой, и каждый из них использует *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.Но функциональность ngx-permissions не работает ни для маршрутизации с использованием NgxPermissionsGuard, ни для элементов, использующих *ngxPermissionsOnly

layout-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 Мой массив разрешений содержит разрешения 'change-password-self', которые добавляются в ngxpermissions с помощью 

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> Итак, эта кнопка должнане отображается, но все еще отображается.

1 Ответ

0 голосов
/ 15 октября 2018

app.module.ts импорт: [... NgxPermissionsModule.forRoot () ...]

Нет необходимости добавлять NgxPermissionsModule в экспорт

layout.module.ts импорт: [... NgxPermissionsModule.forChild () ...]

profile.module.ts импорт: [... NgxPermissionsModule.forChild() ...]

".." - это другой импорт, который у вас есть.

Если это не сработает, опубликуйте ошибки, пожалуйста.

...