파운데이션 6 (각도 2) 작업

Question

파운데이션을 사용하려면 각 구성 요소에 $ (this.elementRef.nativeElement) .foundation()을 입력해야합니다. 그러나 나는 그것을해야하는 부분을 이해할 수 없었다.

예를 들어 마우스를 올리면 드롭 다운을 사용해야합니다.

<div data-toggle="skill-dropdown">Skills</div> 
<div id="skill-dropdown" data-dropdown data-hover="true" data-hover-pane="true"> 
    <ul> 
     <li *ngFor="let skill of skillsList"> 
     <div>{{skill.title}}</div> 
     </li> 
    </ul> 
</div> 

AfterViewInit 또는 AfterContentInit와 같은 각형 후크는이 경우 도움이되지 않습니다.

솔루션으로서 나는에서는 setTimeout을 사용한다 :이 작업을 위해 다른 좋은 해결책이

setTimeout(() => { 
    $(this.elementRef.nativeElement).foundation(); 
}, 5000); 

있습니까?

P.S $ (document) .foundation()도 작동하지 않습니다.

Answer 1

내 홈페이지/응용 프로그램 구성이 가장 단순하게 작동

export class MainComponent implements OnInit { 

    private _router: Router; 

    constructor(router: Router) { 
     this._router = router; 
    } 

    public ngOnInit() { 
     this._router.events.subscribe((event: any) => { 
      if(event instanceof NavigationEnd) { 
       jQuery(document).foundation(); 
      } 
     }); 
    } 
} 

에서 제대로 나는이와 붙어있어 작동하려면 JavaScript가 2 각도 재단에 대한 모든 작업 솔루션을 찾을 수없는 것처럼. Foundation Orbit은이 사용법에 몇 가지 문제가 있습니다. 그래도 Zurb은 Foundation Apps 2를 곧 공개 할 예정이므로 재단 사이트 JavaScript는 기본 Angular 2 지시문으로 바꿀 수 있습니다.

구성 요소의 ngOnInit()에 $(this.elementRef.nativeElement).foundation()을 추가하는지 확인하는 것이 좋습니다. new Foundation.Dropdown(this.elementRef.nativeElement);과 같은 것을 사용하는 것이 가장 좋지만 ngOnInit()에 올바르게 입력해야합니다.

어쩌면 힌트 중 일부가 작동하는 솔루션을 만드는 데 도움이 될 수 있습니다. 네가 일하도록 할 수 있는지 알고 싶다.