Нежелательные множественные вызовы методов при навигации между компонентами - PullRequest
Новая
       10

Нежелательные множественные вызовы методов при навигации между компонентами

0 голосов
/ 17 мая 2019

Я создаю угловое приложение и столкнулся со странной проблемой после входа в систему. Давайте рассмотрим пример входа в учетную запись ADMIN.

Внешний вид сайта теперь выглядит так после правильного входа в систему: 

[main navbar - options like "menu", "contact us" "homepage", etc]

[navbar visible after admin logs in - admin panel, options like "view all users", "view all products", "edit your data", etc]

[view with selected option from admin panel]

каждая подстраница загружается маршрутизаторами (дочерняя иерархия)

В сценарии ниже:

Шаг 1) администратор входит в систему, сайт перемещается в / localhost / admin-панель /

Шаг 2) администратор может перейти на любую страницу с главной панели навигации / панели администратора navbar

Я видел метод, который проверяет, действительно ли пользователь является администратором (он называется checkIfAdmin ()), который вызывается несколько раз:

примечание а) сразу после входа в систему метод checkIfAdmin() вызывается два раза.

примечание б) при нажатии на информацию об учетной записи checkIfAdmin() вызывается уже четыре раза ...

примечание в) и особенно, когда в «меню» на главной навигационной панели checkIfAdmin() вызывается даже шесть раз!

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

Вот несколько примеров фрагментов кода и видимые эффекты того, как приложение работает сейчас:

app.component.html 

<app-navbar></app-navbar>
<router-outlet></router-outlet>

Маршрутизация приложений:

app.routing.ts 

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'admin-panel',
    component: AdminPanelComponent,
    children: [
      {
        path: 'products',
        component: ProductsComponent,
        resolve: {
          products: ProductsResolve,
        }
      },
      {
        path: 'account',
        component: AccountComponent,
        resolve: {
          userData: UserResolve
        }
      },    
    ],
  }
];

Компонент Navbar:

Navbar.component.ts 

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./../../app.component.css']
})
export class NavbarComponent implements OnInit {

  private loggedUser: RegisterUserModel = null;

  constructor(private authService: AuthService,
              private appService: AppService,
              private router: Router) {
  }

  ngOnInit() {
  }

  checkIfAdmin(): boolean {
    if (this.appService.getRole() === 'ADMIN') {
      console.log('for true: ', this.appService.getRole());
     //  console.log('ADMIN TRUE');
      return true;
    } else {
      console.log('for false: ', this.appService.getRole());
      // console.log('ADMIN FALSE');
      return false;
    }
  }

  checkOnline(): boolean {
    if (!this.authService.success) {
      return false;
    }
    this.loggedUser = this.appService.getUser();
    return true;
  }

Основной навигационный html:

navbar.component.html 

<div role="navigation" class="navbar navbar-expand-lg navbar-light bg- 
light border-bottom mb-3">
    <ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" routerLink="/home">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" routerLink="/menu">Menu</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" routerLink="/login">Sign in</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" routerLink="/register">Sign up</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" routerLink="/contact">Contact us</a>
    </li>
    </ul>
    <div *ngIf="checkOnline()">
    <span *ngIf="!checkIfAdmin(); else admin">
        <button class="btn btn-outline-success my-2 my-sm-0" 
type="submit" routerLink="/user-panel">My account</button>
    </span>
    <ng-template #admin>
    <span>
        <button class="btn btn-outline-success my-2 my-sm-0" 
type="submit" routerLink="/admin-panel">Admin panel</button>
    </span>
    </ng-template>
    <div style="float: left ; margin-right: 30px; margin-top: 13px"><h5 
class="ml-3">{{loggedUser.firstName}}, you are logged in !</h5></div>
    <div style="float: right ; margin-right: 30px">
        <button class="btn btn-outline-success my-2 my-sm-0" 
(click)="logoutUser()">Logout</button>
    </div>
    </div>
    <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" 
placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" 
type="submit">Search</button>
</form>
</div>

Панель администратора html:

админ-panel.component.html 

<div style="min-width: 200px; max-width: 300px">
  <div role="navigation" class="navbar navbar-expand-lg navbar-light bg- 
light border-bottom mb-3">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" routerLink="/admin-panel/account">Account 
info</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/menu">Users</a>
      </li>
    </ul>
  </div>
</div>
<router-outlet></router-outlet>

html информации об учетной записи:

account.component.html 

<form class="form-inline my-2 my-lg-0">
  <div class="container">
    <table>
        //[form with user data]
    </table>
  </div>
</form>
<div>
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit" 
routerLink="/home">Go back to homepage</button>
  <button class="btn btn-outline-success my-2 my-sm-0" type="submit" 
routerLink="/admin-panel/edit" >Edit your data</button>
</div>

И скриншот с вопросом после навигации: routing issue

Любая помощь будет оценена, спасибо!

...