Question

目前我正在评估角度为4/5，并且希望让应用程序的外观和感觉更好看＆＃34; fancy＆＃34;所以我想要包括materialzecss。我认为我正确地包含了所需的.css和.js文件（虽然可能不是最好的方式），因为它到目前为止看起来很好。

但我正在努力应对动态JavaScript。例如，在我的导航组件中，我想调用必要的方法

$(".button-collapse")).sideNav()

但它不起作用。当我保存并在浏览器中打开页面时，控制台会记录错误

TypeError：$（...）。sideNav不是函数

所以似乎materialize.js文件提供的mixins没有被正确加载。我认为这是一个普遍的问题，并不具体实现。

我已经用Google搜索了一些答案，但他们并没有为我工作。

目前，我的index.html看起来像这样：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>myApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
</head>

<body>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <app-root></app-root>
</body>

</html>

navigation.component.html如下所示：

<nav>
  <div class="nav-wrapper">
    <a routerLink="" class="brand-logo">&nbsp;myApp</a>
    <a href="#" data-activates="mobile-demo" class="button-collapse">
      <i class="material-icons">menu</i>
    </a>
    <ul class="right hide-on-med-and-down">
      <li>
        <a routerLink="link1">Link1</a>
      </li>
      <li>
        <a routerLink="link2">Link2</a>
      </li>
    </ul>
    <ul class="side-nav" id="mobile-demo">
      <li>
        <a class="subheader"></a>
      </li>
      <li>
        <div class="divider"></div>
      </li>
      <li>
        <a routerLink="link1" class="waves-effect">Link2</a>
      </li>
      <li>
        <a routerLink="link2" class="waves-effect">Link2</a>
      </li>
    </ul>
  </div>
</nav>

navigation.component.ts如下所示：

import { Component, AfterViewInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    $(document).ready(function () {
      (<any>$(".button-collapse")).sideNav();
    });
  }

  constructor() { }
}

我想我在这里错过了一个重要的观点，也许我包含文件的方式是错误的，或者我必须导入一些东西，但我不能得到它。

旁注：我不想使用棱角分明的材料。我想让这个场景起作用。

谢谢你们！

亚历

Answer 1

我认为标题中的jQuery实例正在被组件中的导入替换。

要避免此问题，请在组件中使用以下内容，让打字稿知道应用程序中已存在全局jquery实例。

declare var $: any;

正如Niklas在他的回答中所建议的那样，不建议在Angular中使用jQuery。

Answer 2

你可能错过了jQuery

你应该使用角度模块而不是使用jQuery的基本bootstrap / materialize

对于bootstrap，我使用ng-bootstrap https://ng-bootstrap.github.io/#/home

我不知道materializecss，但我发现了一些可能对你有帮助的东西 https://github.com/InfomediaLtd/angular2-materialize

Answer 3

如果你想将jQuery与angular结合使用，你必须将它包含在package.json中。

无论如何，强烈建议您为了您的目的从jQuery切换到特定的角度框架。

~~您只需使用Angular Material即可获取Material CSS和组件。它还包括一个sidenav;）~~（OP不想为他的材料CSS使用额外的框架）

在这种情况下，通常最好只排除jQuery并使用普通的Angular。它应该带来所有必需的功能。

Angular与设计框架相结合，如实现或引导

3 个答案: