Question

我正在更改生成的应用程序中的JHipster布局。

我可以将Principal注入到router-outlet内部呈现的任何组件中，但是，如果我尝试将其注入到主组件中，则每次尝试登录/注销时都会显示错误（我刷新页面，一切都显示正常）。

引起问题的代码是

export class JhiMainComponent implements OnInit {
    constructor(private jhiLanguageHelper: JhiLanguageHelper, private router: Router, principal: Principal) {}

如果我删除了principal: Principal，一切都会恢复正常，如果我添加了这个注入，则登录会因错误而停止工作

错误TypeError：无法读取未定义的属性“ authenticate” 在LoginService.logout上（webpack-internal：///./src/main/webapp/app/core/login/login.service.ts：33）在NavbarComponent.logout（webpack-internal：///./src/main/webapp/app/layouts/navbar/navbar.component.ts：49）中在Object.eval [作为handleEvent]（ng：///ConsuldentAppModule/NavbarComponent.ngfactory.js：695）在handleEvent（webpack-internal：///./node_modules/@angular/core/fesm5/core.js：19661）在callWithDebugContext（webpack-internal：///./node_modules/@angular/core/fesm5/core.js：20755）在Object.debugHandleEvent [作为handleEvent]（webpack-internal：///./node_modules/@angular/core/fesm5/core.js：20458）在dispatchEvent（webpack-internal：///./node_modules/@angular/core/fesm5/core.js：17110）上在评估时（webpack-internal：///./node_modules/@angular/core/fesm5/core.js：17557）在HTMLAnchorElement.eval（webpack-internal：///../node_modules/@angular/platform-browser/fesm5/platform-browser.js：1044）在ZoneDelegate.invokeTask（webpack-internal：///./node_modules/zone.js/dist/zone.js：420）

我需要该属性，因为我有一些条件样式可供选择，具体取决于用户是否登录（这里我尝试使用isAuthenticated（）方法）

<div id="page-container" class="page-container fade page-sidebar-fixed page-header-fixed show" [ngClass]="{
    'page-without-sidebar': isPageWithoutSidebar() || !isAuthenticated()
  }">
    <router-outlet name="header" *ngIf="!pageSettings.pageEmpty"></router-outlet>
    <router-outlet name="sidebar" *ngIf="!isPageWithoutSidebar() && !pageSettings.pageEmpty && isAuthenticated()"></router-outlet>

    <div id="content" class="content" [ngClass]="{
    'content-full-width': pageSettings.pageContentFullWidth,
    'content-inverse-mode': pageSettings.pageContentInverseMode,
    'p-0 m-0': pageSettings.pageEmpty
  }">
        <router-outlet></router-outlet>
        <router-outlet name="popup"></router-outlet>
    </div>

    <jhi-footer *ngIf="pageSettings.pageWithFooter"></jhi-footer>
</div>

Answer 1

好吧，我所做的就是用变量创建服务

@Injectable({
    providedIn: 'root'
})
export class PageSettingsService {
    pageSettings = pageSettings;

    constructor() {
    }
}

然后我将此服务注入到使用pageSettings属性的主要组件中

export class AppComponent extends JhiMainComponent implements OnInit {

    pageSettings;
    // window scroll
    pageHasScroll;

    ngOnInit() {
        super.ngOnInit();
        // page settings
        this.pageSettings = this.pageSettingsService.pageSettings;
    }
}

然后我编辑了登录服务（这部分看起来不干净，但是可以正常工作）

@Injectable({ providedIn: 'root' })
export class LoginService {
    constructor(private principal: Principal, private authServerProvider: AuthServerProvider, private pageSettingsService: PageSettingsService) {}

    login(credentials, callback?) {
        const cb = callback || function() {};

        return new Promise((resolve, reject) => {
            this.authServerProvider.login(credentials).subscribe(
                data => {
                    this.principal.identity(true).then(account => {
                        resolve(data);
                        this.pageSettingsService.pageSettings.pageWithoutSidebar = false; //Added
                    });
                    return cb();
                },
                err => {
                    this.logout();
                    reject(err);
                    return cb(err);
                }
            );
        });
    }
...
    logout() {
        this.pageSettingsService.pageSettings.pageWithoutSidebar = true; //Added
        this.authServerProvider.logout().subscribe();
        this.principal.authenticate(null);
    }
}

在JHipster Angular主要组件的“路由器出口”之外访问Principal

1 个答案: