Как правильно выбрать роутер-аутлет с помощью angular6

Question

Я должен показать две разные страницы, т.е.перед входом в систему и после входа в систему

перед входом в систему

Отображаются только домашняя страница и кнопка входа

после страницы входа в систему

это покажет страницу общего шаблона, которая будет иметь все меню

Теперь для этого у меня есть две страницы,один с маршрутизатором-выходом для отображения простой страницы без строки меню, а другой с маршрутизатором-выходом в окружении строк меню.но моя проблема в том, что я не могу решить, какая страница будет идти, на какой маршрутизатор-розетку, как я могу программно выбрать розетку-маршрутизатор для страницы, есть ли другой способ сделать это, пожалуйста, совет

- роутер-розетка-A

--home page

--login page

- роутер-розетка-B

--product page

--testimonial page

ОБНОВЛЕНИЕ:

я ищуза что-то подобное

<router-outlet #templateA></router-outlet> 
<router-outlet #templateB></router-outlet>

decideOnTemplate() {
    if(user-not-logged-in) {
        this.templateA.send(this.page)
    } else {
        this.templateB.send(this.page)
    }
}

Answer 1

Вот основные шаги для маршрутизации, которые предоставлены на этом сайте https://dzone.com/articles/angular-5-material-design-login-application

Вышеприведенные пункты можно суммировать следующим образом.

Шаг 1: Разработка 2 компонентов, компонент входа в системуи Page Component вместе с установочным компонентом, называемым app.settings.ts (здесь мы можем создать класс, который содержит переменные для Sidenavbar, фиксированный заголовок)

mport { Injectable } from '@angular/core';
import { Settings } from './app.settings.model';

@Injectable()
export class AppSettings {
    public settings = new Settings(
        true,       // fixedHeader
        true,       // sidenavIsOpened
    );
}

Шаг 2: С помощью вышеупомянутогоВ настройках (здесь sidenavIsOpened, который определяется пользователем) мы можем обрабатывать элементы навигации navbar с помощью * ngIf.

  <mat-sidenav *ngIf="settings.sidenavIsOpened">
        <app-sidenav></app-sidenav> // here we can give our pages details.
    </mat-sidenav>

Обратитесь к Lazy Routing, что похоже на вашу идею https://angular.io/guide/lazy-loading-ngmodules

Answer 2

Да. Вы можете сделать это !!!Если вы хотите после успешной аутентификации перейти на страницу вашего продукта, вы можете вставить ниже логику в вашем app.component.ts

constuctor(private router: Router)

login(){
<--- Your logic --->
this.router.navigate(['/product-page']);
}

Hope this will help.