Question

我已经设置了一个基本的Angular2 Auth0与JWT集成，现在我想使用Foundation和jQuery作为依赖。

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>App</title>

    <!-- Latest compiled and minified CSS from zurb. -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css">

     <!-- Auth0 Lock script -->
    <script src="http://cdn.auth0.com/js/lock/10.0.0/lock.min.js"></script>
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>
<body>
    <my-app>Loading...</my-app>

    <script
              src="https://code.jquery.com/jquery-2.2.4.js"
              integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
              crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>
</body>
</html>

虽然似乎存在问题，因为标题栏已展开，例如jQuery不起作用或未集成。

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li class="has-submenu">
        <a href="#">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

我似乎得到的是以下屏幕截图：

Answer 1

我遇到了同样的问题。但我设法解决了以下信息。

According Jon:

＆＃34;所以从我能发现的问题看.js基础工作 - 你基本上必须运行$（document）.foundation（）;对于可能具有任何动态基础元素的每个角度2组件...如topbar等。

因此，对于我的主导航，我创建了一个＆＃39; mainnav.component.ts＆＃39;文件看起来像这样：＆＃34;

＆＃13;

import { Component, OnInit, AfterViewInit, ElementRef } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

let $ = require('../../bower_components/jquery/dist/jquery.js');
let foundation = require('../../bower_components/foundation-sites/dist/foundation.js');

@Component({
    selector: 'app-main-nav',
    templateUrl: 'app/main-nav/main-nav.component.html',
    directives: [ ROUTER_DIRECTIVES ],
    styleUrls: ['app/main-nav/main-nav.component.css']
})
export class MainNavComponent implements AfterViewInit {

    constructor(private el: ElementRef) { }

    ngAfterViewInit() {
        $(this.el.nativeElement.ownerDocument).foundation();
    }

}

＆＃13;

根据Jon的说法，＆＃34;这似乎是一个临时的解决方案，直到zurb发布了针对Apps 2的应用程序，这显然不会发生在2016年底。＆＃34;

Angular2与jQuery和Foundation.js

1 个答案: