带布线的角度设置滑入式面板

Question

Stacklitz演示：https://stackblitz.com/edit/angular-ivy-tf3pip?file=src%2Fapp%2Fapp.component.html

我试图在Angular 2+中设置这个带有路由的滑入面板，这个代码在平面html中工作得很好，但我需要用Angular路由触发面板，所以如果我转到路由："slideinpanel"，面板应该打开。我一直在尝试在加载滑动面板组件时触发面板。代码在stackblitz链接中。有什么建议吗？提前谢谢。

Answer 1

在sidepanle组件中实现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, ' ');
}
}
} 

然后，您可以处理关闭功能以路由到hello组件

查看我更新的https://stackblitz.com/edit/angular-ivy-ncbylz

Answer 2

您可以从应用程序组件监听路由器事件，并订阅路由器NavigationEnd事件

应用程序组件.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          
}
});
}

您可能需要取消订阅组件销毁时的路由器事件。

Answer 3

如果你想创建带有路线/幻灯片面板的幻灯片，你需要创建新的组件

ng g -c slidepanel

在模块上添加组件。如果您使用路由应用程序文件，请添加新的路由/滑动面板

在这个组件中，您需要添加所有样式吗？html是运行幻灯片所必需的。检查样式表文件和名称组件。记住访问

TypeScript：任何规模的打字JavaScript。https://www.typescriptlang.org

有关更多信息Angular文档，请访问https://angular.io/guide/lifecycle-hooks