Angular4/typescriptでSPAを構築しています。 私は、アプリケーションに統合したいDOM(CSSクラスの追加/削除)を操作するいくつかのjavascriptを持っています。 これを行うにはどうすればよいですか? は現在、次のされているアプリケーションの構造:複数のDOM要素をAngular4で扱う
-app:
-app.component.ts
-app.module.ts
-menu.component.ts
-menu.view.html
-menu.css
menu.component.tsは、アプリケーションのデータ表示を処理します。 は、私は次のスクリプトを統合したい:
<script>
const triggers = document.querySelectorAll('.cool > li');
const background = document.querySelector('.dropdownBackground');
const nav = document.querySelector('.top');
function handleEnter(){
this.classList.add('trigger-enter');
setTimeout(() => this.classList.contains('trigger-enter') &&
this.classList.add('trigger-enter-active'), 150);
background.classList.add('open');
const dropdown = this.querySelector('.dropdown');
const dropdownCords = dropdown.getBoundingClientRect();
const navCoords = nav.getBoundingClientRect();
const coords = {
height: dropdownCords.height,
width: dropdownCords.width,
top: dropdownCords.top - navCoords.top,
left: dropdownCords.left- navCoords.left
};
background.style.setProperty('width', `${coords.width}px`);
background.style.setProperty('height', `${coords.height}px`);
background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
}
function handleLeave(){
this.classList.remove('trigger-enter', 'trigger-enter-active');
background.classList.remove('open');
}
triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
</script>
CSS:
nav {
position: relative;
perspective: 600px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.cool > li {
position: relative;
display:flex;
justify-content: center;
}
.cool > li > a {
color: yellow;
text-decoration: none;
font-size: 20px;
background: rgba(0,0,0,0.2);
padding:10px 20px;
display: inline-block;
margin:20px;
border-radius:5px;
}
.dropdown {
opacity: 0;
position: absolute;
overflow: hidden;
padding:20px;
top:-20px;
border-radius:2px;
transition: all 0.5s;
transform: translateY(100px);
will-change: opacity;
display: none;
}
.trigger-enter .dropdown {
display: block;
}
.trigger-enter-active .dropdown {
opacity: 1;
}
.dropdownBackground {
width:100px;
height:100px;
position: absolute;
background: #fff;
border-radius: 4px;
box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);
transition:all 0.3s, opacity 0.1s, transform 0.2s;
transform-origin: 50% 0;
display: flex;
justify-content: center;
opacity:0;
}
.dropdownBackground.open {
opacity: 1;
}
.arrow {
position: absolute;
width:20px;
height:20px;
display: block;
background:white;
transform: translateY(-50%) rotate(45deg);
}
HTML:
<nav class="top" menuElement>
<div class="dropdownBackground">
<span class="arrow"></span>
</div>
<ul class="cool">
<li>
<a href="#">Some information</a>
<div class="dropdown dropdown1">
Info
</div>
</li>
<li>
<a href="#">More information</a>
<ul class="dropdown">
<li>
some info
</li>
</ul>
</li>
<li>
<a href="#">Other Links</a>
<ul class="dropdown dropdown3">
<li>some links</li>
</ul>
</li>
</ul>
</nav>
は3 querySelectorあります。 Iは、指令を定義することによって機能を実装しようとした: menu.directive.ts:
import {Directive, HostListener, ElementRef, Renderer2} from '@angular/core';
@Directive({
selector: '[menuElement]',
})
export class MenusDirective {
constructor(
private renderer: Renderer2,
private el: ElementRef
){}
//menuLi = this.el.nativeElement.querySelectorAll('.cool > li');
background = this.el.nativeElement.querySelector('.dropdownBackground');
handleEnter(target){
this.renderer.addClass(target, 'trigger-enter');
setTimeout(() => target.classList.contains('trigger-enter') &&
this.renderer.addClass(target, 'trigger-enter-active'), 150);
this.background.classList.add('open');
const dropdown = target.querySelector('.dropdown');
const dropdownCords = dropdown.getBoundingClientRect();
const filterNavCoords = this.el.nativeElement.getBoundingClientRect();
const coords = {
height: dropdownCords.height,
width: dropdownCords.width,
top: dropdownCords.top - filterNavCoords.top,
left: dropdownCords.left- filterNavCoords.left
};
this.background.style.setProperty('width', `${coords.width}px`);
this.background.style.setProperty('height', `${coords.height}px`);
this.background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
}
handleLeave(target){
this.renderer.removeClass(target, 'trigger-enter');
this.renderer.removeClass(target, 'trigger-enter-active');
this.background.classList.remove('open');
}
@HostListener('mouseenter', ['$event']) onMouseEnter(event: Event) {
this.handleEnter(event.target);
}
@HostListener('mouseleave', ['$event']) onMouseLeave(event: Event) {
this.handleLeave(event.target);
}
}
Iセレクタを定義する場合、[するMenuElement上部NAVに等しく、Iは、選択することができます:
background = this.el.nativeElement.querySelector('.dropdownBackground');
または
triggers = this.el.nativeElement.querySelectorAll('.cool > li');
が、イベントリスナーは、全体のナビゲーションバー上のバインドになり、その「.cool>李」のいずれかが選択されているかを知る方法はありません。 [menuElement]を '.cool> li'と定義すると、 '.dropdownBackground'または上部ナビゲーションを選択する方法が見つかりません。
const background = document.querySelector('.dropdownBackground');
戻り、それらが同時に操作されているように私は別のディレクティブでそれらを定義することはできません(私はなど、getElementByClassNameも試してみました) ヌル。 はまた、私はHTMLで機能を追加しようとしました:
<li (mouseenter)="handleEnter($event.target)" (mouseleave)="handleLeave($event.target)">
しかしmenu.componentでmenu.directiveで定義されていないなどの機能が認識されません。 可能な解決策は何ですか? - (DOMがロードされた後にロードされた)Javascriptをそのまま統合します - 複数のDOMオブジェクトを選択しますが、そのうちの1つにEventListenerをバインドします。 ありがとう! 私は仕事に考え出したヴェロニカ