Доступ к принципалу за пределами «роутера» в главном компоненте в JHipster Angular

Question

Я изменяю макет JHipster в сгенерированном приложении.

Я могу вставить Principal в любой компонент, отображаемый внутри router-outlet, однако, если я попытаюсь внедрить его в основной компонент,каждый раз, когда я пытаюсь войти / выйти из системы, появляется сообщение об ошибке (если я обновляю страницу, все отображается нормально).

Код, вызывающий проблему:

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

Если я удаляю principal: Principalвсе работает снова, если я добавляю эту инъекцию, то логин перестает работать с ошибкой

ОШИБКА TypeError: Невозможно прочитать свойство 'authenticate' из undefined в 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) в 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>

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);
    }
}