在 Angular 2 中使用 Foundation 6答案

【问题标题】：Work with Foundation 6 in Angular 2在 Angular 2 中使用 Foundation 6
【发布时间】：2016-08-17 06:56:18
【问题描述】：

据我所知，当我想使用基础时，我应该将 $(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 这样的 Angular Hooks 在这种情况下没有帮助。

作为解决方案，我应该使用 setTimeout：

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

这个任务还有其他好的解决方案吗？

P.S $(document).foundation() 也不起作用。

【问题讨论】：

真的需要5000（5 秒）还是同样适用于1000（1 秒）？能否请您添加组件及其 HTML
@PankajParkar 模板的主要部分存在问题。在组件中我没有逻辑，只有硬代码数组。

标签： angular zurb-foundation angular2-template zurb-foundation-6

【解决方案1】：

由于我还没有找到任何使基础 javascript 和 angular 2 正常工作的有效解决方案，我在我的主/应用程序组件中遇到了这个问题

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();
            }
        });
    }
}

这适用于大多数简单的事情。 Foundation Orbit 在这种用法上存在一些问题。我仍然希望 Zurb 很快会发布 Foundation Apps 2，因此 Foundation Sites JavaScript 可以被原生 Angular 2 指令替换。

对于您的问题，您可以检查将 $(this.elementRef.nativeElement).foundation() 添加到组件的 ngOnInit() 中是否有效。最好在ngOnInit() 中使用new Foundation.Dropdown(this.elementRef.nativeElement); 之类的东西，但我也没有让它正常工作。

也许其中一些提示可以帮助您创建一个可行的解决方案。想知道你是否可以让它工作。

【讨论】：