Как решить, когда отдавать колонтитул, корректировать ли колонтитул в Angular 7? - PullRequest
Новая
       50

Как решить, когда отдавать колонтитул, корректировать ли колонтитул в Angular 7?

0 голосов
/ 20 декабря 2018

Не могли бы вы помочь мне в следующей ситуации:

Мне нужно перейти от имени входа на панель мониторинга, используя app.routes, но на панели управления используются другие теги, такие как заголовок приложения, когда имя входанет, например, в app.component.html это будет то, что у меня есть для обработки маршрутизации: 

<div class="wrapper">
    <app-header></app-header>
    <app-left-menu></app-left-menu>

    <router-outlet></router-outlet>

    <app-footer></app-footer>
    <app-right-menu></app-right-menu>
</div>

, но для входа требуется только <router-outlet> </ router-outlet> без других тегов, как я могу сделать это взаимодействие,Я имею в виду ngIf, где я помещаю div в оболочку, а другой - в <router-outlet > </ router-outlet> непосредственно для входа в систему.Это было бы хорошей идеей?Как изменить переменную ngIf при переходе на другой экран?Есть ли какой-то более конкретный способ перейти от входа в систему к панели мониторинга, защищая все маршруты панели для перенаправления на страницу входа?Буду признателен за помощь.

1 Ответ

0 голосов
/ 20 декабря 2018

Правильный способ сделать это с функциональными модулями, если у вас есть отдельные функции, вы можете создать отдельный модуль для каждого из них.Это дает вам больше гибкости, чистый код и отдельные проблемы, а также улучшают производительность, потому что вы можете лениво загружать модули.Проверьте документацию здесь: https://angular.io/guide/feature-modules.

Например, вы можете определить модуль в качестве точки входа для вашего приложения, когда пользователь вошел в систему, называется InsideModule, у этого модуля есть собственная маршрутизация, которая называется InsideRoutingModule и может выглядеть такthis: 

{
    path: 'home',
    component: InsideComponent,
    children: [
      {
        path: '',
        component: HomeComponent,
      },

    ]
}

Таким образом, InsideComponent - это HTML-код для рендеринга внутри этого модуля, и здесь вы можете использовать общие теги для приложения: 

<div class="wrapper">
    <app-header></app-header>
    <app-left-menu></app-left-menu>

    <router-outlet></router-outlet>

    <app-footer></app-footer>
    <app-right-menu></app-right-menu>
</div>

Для доступа к этому модулю импортируйтеих в файле app.module и измените app.routing следующим образом: 

const routes: Routes = [
    {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
    },
    {
        path: 'login',
        component: LoginComponent
    },
    {
        path: 'inside',
        loadChildren: () => InsideModule //this is lazy loading
    }
];

Или просто перенаправьте на путь, указанный в InsideRoutingModule через маршрутизатор.

app.module.htmlиметь только <router-outlet> тег

...