Почему элементы Bootstrap 4 перезагружают все приложение Angular 7? - PullRequest
Новая
       41

Почему элементы Bootstrap 4 перезагружают все приложение Angular 7?

1 голос
/ 10 июля 2019

Я работаю с начальной загрузкой 4 и угловой 7, у меня есть следующий элемент, функция которого состоит в том, чтобы скрыть / показать боковую панель. 

<a
  class="app-sidebar__toggle"
  href="#"
  data-toggle="sidebar"
  aria-label="Hide Sidebar"
></a>

Проблема в том, что когда я вхожу в конкретный маршрут, это перезагружает всю страницу. Это мои маршруты в app-routing.module.ts 

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'catalogo/lista', component: CatalogoListaComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];

Итак, если я введу http://localhost:4200/home,, произойдет ошибка, но если я войду в любой другой маршрут (мой пустой маршрут по умолчанию будет перенаправлен в / home), например, http://localhost:4200 или http://localhost:4200/a_route_that_not_exists, Я перенаправлен в / home (как и ожидалось), и кнопка, которая показывает / скрывает боковую панель, работает хорошо.

Я надеюсь прояснить мою проблему, и я бы очень хотел, чтобы вы мне помогли.

РЕДАКТИРОВАТЬ: больше код моего приложения ...

Это мой app.component.html: 

<app-header></app-header>

<app-sidebar></app-sidebar>

<div class="app-content">
  <app-title [titulo]="titulo" [icono]="icono [breadcrumbs]="breadcrumbs"></app-title>
  <router-outlet></router-outlet>
</div>

Это мой header.component.html (где я использую ссылку, чтобы показать / скрыть боковую панель): 

<header class="app-header">
  <a class="app-header__logo" href="index.html">Vali</a>
  <!-- Sidebar toggle button-->
  <a
    class="app-sidebar__toggle"
    href="#"
    data-toggle="sidebar"
    aria-label="Hide Sidebar"
  ></a>
  <p>.... more html</p>
</header>

А это мой sidebar.component.html: 

<div class="app-sidebar__overlay" data-toggle="sidebar"></div>
<aside class="app-sidebar">
  <div class="app-sidebar__user">
    <img
      class="app-sidebar__user-avatar"
      src="https://s3.amazonaws.com/uifaces/faces/twitter/jsa/48.jpg"
      alt="User Image"
    />
    <div>
      <p class="app-sidebar__user-name">John Doe</p>
      <p class="app-sidebar__user-designation">Frontend Developer</p>
    </div>
  </div>
  <ul class="app-menu">
    <li>
      <a class="app-menu__item" [routerLink]="['/home']">
        <i class="app-menu__icon fa fa-home"></i>
        <span class="app-menu__label">Inicio</span>
      </a>
    </li>
    more menu elements...
  <ul>
</aside>

1 Ответ

0 голосов
/ 11 июля 2019

Как правило, многие элементы Popper / JS в Bootstrap не работают из коробки в Angular;Angular предоставляет довольно надежный способ обработки таких элементов, как sidenavs.

Поскольку элемент, который вы хотите использовать для переключения sidenav, не существует в том же компоненте, что и sidenav, вы можете настроить базовую службу, которая обрабатываетSidenav State.Чтобы создать службу sidenav (запустить в консоли в корне вашего проекта): 

ng g s sidenav

А затем в сгенерированном sidenav.service.ts: 

import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs';

@Injectable()
export class SidenavService {
  public isOpen: boolean = false;
  public toggleChange: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  constructor() {}

  public toggle(): void {
    this.isOpen = !this.isOpen;
    this.toggleChange.next(this.isOpen);
  }
}

В вашем header.component.html выВы можете изменить интерактивный элемент, который будет отображать / скрывать боковую панель: 

<a
  class="app-sidebar__toggle"
  aria-label="Hide Sidebar"
  (click)="toggleSidebar()"
></a>

В своем файле header.component.ts вы можете затем установить toggleSidebar() для запуска функции toggle() в только что настроенной службе:

import {SidenavService} from "[wherever your service is located]";


@Component({ /*...*/ })
export class HeaderComponent {

  constructor(private sidenavService: SidenavService)

  toggleSidebar(): void {
    this.sidenavService.toggle();
  }

}

Затем можно (в компоненте приложения или в компоненте боковой панели) настроить реакцию на переключатель: 

//assuming you're in sidebar.component.ts
import {SidenavService} from "[wherever your service is located]";
import {OnInit, OnDestroy} from "@angular/core";
import {Subscription} from "rxjs";

@Component({ /*...*/ })
export class SidebarComponent implement OnInit, OnDestroy {
  isOpen: boolean;
  sidenavSubscription: Subscription;

  constructor(private sidenavService: SidenavService) {}

  ngOnInit() {
    this.sidenavSubscription = this.sidenavService.toggleChange.subscribe(isOpenChange => {
      this.isOpen = isOpenChange;
    });
  }

  ngOnDestroy() {
    this.sidenavSubscription.unsubscribe();
  }
}

Затем можно использовать переменную isOpen в боковой панели.Компонент по-разному контролировать деятельность боковой панели.Примеры включают использование директивы [ngClass]: 

<!--in your header component-->
<header [ngClass]={'active': isOpen, 'inactive': !isOpen} >
</header>

Или вы можете встроить что-либо, используя угловую анимацию, для анимации боковой панели, входящей и выходящей (используя переходы ngIf и :enter / :leave).

...