Демонстрация Stackblitz: https://stackblitz.com /edit/angular-ivy-tf3pip?file=src%2Fapp%2Fapp.component.html

Я пытаюсь установить эту выдвижную панель с маршрутизацией в Angular 2+, этот код отлично работает в плоском HTML, но мне нужно запустить панель с маршрутизацией Angular, поэтому, если я перейду на маршрут: 'slideinpanel' панель должен открыться. Я пытался запустить панель при загрузке компонента slideinpanel. Код находится по ссылке stackblitz. Любой совет? Заранее спасибо.

-3
sonEtLumiere 3 Июл 2021 в 21:19

3 ответа

Лучший ответ

Реализуйте ngAfterInit в компоненте боковой панели, чтобы загрузить функцию, отображающую панель:

      export class SlideInPanelComponent implements AfterViewInit {
      ngAfterViewInit(): void {
setTimeout(this.slideInPanelFunction, 50);
      }
}

Затем в функции вызовите функцию addClass при вызове функции

  slideInPanelFunction() {
    debugger;
    var panelTriggers = document.getElementsByClassName('js-cd-panel-trigger');
    if (panelTriggers.length > 0) {
      for (var i = 0; i < panelTriggers.length; i++) {
        (function(i) {
          var panelClass =
              'js-cd-panel-' + panelTriggers[i].getAttribute('data-panel'),
            panel = document.getElementsByClassName(panelClass)[0];
          // open panel when clicking on trigger btn
         addClass(panel, 'cd-panel--is-visible'); 
        //  panelTriggers[i].addEventListener('click', function(event) {
         //   event.preventDefault();
        //    addClass(panel, 'cd-panel--is-visible');
      //    });
          //close panel when clicking on 'x' or outside the panel
          panel.addEventListener('click', function(event) {
            if (
              hasClass(event.target, 'js-cd-close') ||
              hasClass(event.target, panelClass)
            ) {
              event.preventDefault();
              removeClass(panel, 'cd-panel--is-visible');
              console.log(i);
            }
          });
        })(i);
      }
    }

    //class manipulations - needed if classList is not supported
    //https://jaketrent.com/post/addremove-classes-raw-javascript/
    function hasClass(el, className) {
      if (el.classList) return el.classList.contains(className);
      else
        return !!el.className.match(
          new RegExp('(\\s|^)' + className + '(\\s|$)')
        );
    }
    function addClass(el, className) {
      if (el.classList) el.classList.add(className);
      else if (!hasClass(el, className)) el.className += ' ' + className;
    }
    function removeClass(el, className) {
      if (el.classList) el.classList.remove(className);
      else if (hasClass(el, className)) {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        el.className = el.className.replace(reg, ' ');
      }
    }
  } 

Тогда вы можете обработать функцию close для перехода к компоненту hello

Увидеть обновленное, которое я сделал https://stackblitz.com/edit/angular-ivy-ncbylz

1
Ibraheem Abulubbad 7 Июл 2021 в 02:07

Вы можете прослушивать события вашего маршрутизатора из компонента приложения и подписаться на событие router NavigationEnd

< Сильный > App.component.ts

Сначала импортируйте необходимые

import { NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs/operators';
import { Subscription } from 'rxjs/dist/types';

В конструктор вставьте экземпляр Router

constructor(private router: Router) {}

Затем реализуйте ngOnInit следующим образом:

ngOnInit(){
    this.router.events
    .pipe(filter(event=>event instanceof NavigationEnd))
    .subscribe((event:NavigationEnd)=>{
        console.log("NavigationEnd to url",event.url)
        if(event.url=="/slideinpanel")
        {
          //Logic Goes here          
        }
    });
  }

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

1
Ayman Ali 7 Июл 2021 в 10:36

Если вы хотите создать слайд с маршрутом / слайд-панелью, вам нужно создать новый компонент

ng g -c slidepanel

Добавьте компонент в module.app, если вы используете файл приложения маршрута, добавьте новый маршрут / слайд-панель

В этом компоненте вам нужно добавить все стили html, необходимые для запуска слайда. проверьте файл таблицы стилей и name.component.ts запомнить посещение

TypeScript: типизированный JavaScript в любом масштабе. Https://www.typescriptlang.org

Дополнительную информацию об Angular можно найти на странице https://angular.io/guide/lifecycle-hooks.

0
Dandev 5 Июл 2021 в 22:22