在 JHipster Angular 的主要组件中访问 'router-outlet' 之外的 Principal

Question

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

我可以在 router-outlet 内呈现的任何组件中注入 Principal，但是，如果我尝试将它注入主要组件，每当我尝试 [=30] 时都会显示错误=]（如果我刷新页面，一切都显示正常）。

导致问题的代码是

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

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

ERROR TypeError: Cannot read property 'authenticate' of undefined at LoginService.logout (webpack-internal:///./src/main/webapp/app/core/login/login.service.ts:33) at NavbarComponent.logout (webpack-internal:///./src/main/webapp/app/layouts/navbar/navbar.component.ts:49) at Object.eval [as handleEvent] (ng:///ConsuldentAppModule/NavbarComponent.ngfactory.js:695) at handleEvent (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:19661) at callWithDebugContext (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:20755) at Object.debugHandleEvent [as handleEvent] (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:20458) at dispatchEvent (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:17110) at eval (webpack-internal:///./node_modules/@angular/core/fesm5/core.js:17557) at HTMLAnchorElement.eval (webpack-internal:///./node_modules/@angular/platform-browser/fesm5/platform-browser.js:1044) at 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 的主要组件中访问 'router-outlet' 之外的 Principal

Acces to Principal outside the 'router-outlet' in main component in JHipster Angular

jhipster

angular