Angular: маршрутизация на разные модули при загрузке страницы - PullRequest
Новая
       14

Angular: маршрутизация на разные модули при загрузке страницы

0 голосов
/ 29 ноября 2018

Я недавно начал работать над Angular (Angular 5), маршрутизация была очень новой и слабой.В моем приложении есть 3 вкладки с именем Home, School, Office, и у меня есть два типа пользователей Admin и non-admin.Как только нажата вкладка Office, администратор будет перенаправлен на страницу администратора, а пользователь без прав администратора будет перенаправлен на страницу без прав администратора.

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

app.module.ts 

@NgModule({
  imports: [
    BrowserModule,
    AdminModule,
    NonAdminModule
  ],
  declarations: [AppComnonent],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts 

ngOnInit(){
 this.userIsAdmin = true;
}

app.component.html 

<div *ngIf='!userIsAdmin '>
<non-admin-page></non-admin-page>
</div>
<div *ngIf='userIsAdmin '>
<admin-page></admin-page>
</div>

без прав администратора.module.ts 

@NgModule({
      imports: [

      ],
      declarations: [NonAdminComnonent],
      exports: [NonAdminComnonent]
    })
    export class NonAdminPageModule { }

admin.module.ts 

@NgModule({
      imports: [

      ],
      declarations: [AdminComnonent],
      exports: [AdminComponent]
    })
    export class AdminPageModule { }

admin-page.html 

<div>I am ADMIN</div>

non-admin-page.html 

<div>I am not an ADMIN</div>

При загрузке страницы мне нужно маршрутизировать к разным модулям, правильная маршрутизация?Пожалуйста, ведите меня.

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

В вашем случае вы просто показываете admin и не-admin html на основе условия в том же компоненте.Если вы хотите использовать маршрутизацию для дифференциации, вы можете использовать следующую процедуру:

  1. Создать флаг для дифференциации пользователя (как вы уже сделали)
  2. Создать вкладки на основе этого условия,У вас есть две вкладки для офиса - одна, которая перенаправляет на admin , а другая - на не-админ , и отображает только один из них на основе флага.

Таким образом, вы можете различать компоненты для администратора и не администратора.

0 голосов
/ 29 ноября 2018

Я бы использовал ленивую загрузку: Как перейти к функциональному модулю .

Если бы не попробовать это: https://stackblitz.com/edit/angular-hd7ayj.

Вместо Диснея, ваш код будетшкола.

См. мой профиль, чтобы увидеть само приложение.

Надеюсь, это поможет.Удачного кодирования.

...