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这样的Angular Hook在这种情况下没有帮助。

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

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

这项任务还有其他一些好的解决方案吗？

P.S $（document）.foundation（）也不起作用。

Answer 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，因此基础网站JavaScript可以被原生的Angular 2指令取代。

对于您的问题，您可以检查是否将$(this.elementRef.nativeElement).foundation()添加到组件的ngOnInit()中。最好的方法是在new Foundation.Dropdown(this.elementRef.nativeElement);中使用类似ngOnInit()的内容，但我也无法正常使用。

也许一些提示可能会帮助您创建一个有效的解决方案。想听听你是否能让它发挥作用。

在Angular 2中与Foundation 6合作

1 个答案: