在 JHipster Angular 的主要组件中的“路由器插座”之外访问 Principal答案

【问题标题】：Acces to Principal outside the 'router-outlet' in main component in JHipster Angular在 JHipster Angular 的主要组件中的“路由器插座”之外访问 Principal
【发布时间】：2019-05-04 08:34:43
【问题描述】：

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

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

导致问题的代码是

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

如果我删除 principal: Principal 一切都会再次运行，如果我添加此注入，则登录将停止工作并出现错误

错误类型错误：无法读取未定义的属性“身份验证” 在 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 [as 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 [as handleEvent] (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:20458) 在 dispatchEvent (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:17110) 在 eval (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>

【问题讨论】：

标签： angular jhipster

【解决方案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);
    }
}

【讨论】：