相关疑难解决方法(0)

我已经对这个主题进行了一些研究,并找到了需要用于打字稿的库的类型.我努力寻找的是使用的例子,比如说在角度2应用程序中的jquery.

这里有一些问题:

1)在哪里编写他的jQuery代码,是在类的内部还是在该类的内部构造函数中？

2)我们是否需要在任何时候使用document.ready包装jQuery代码？即如果我们在构造函数中编写代码,它是否在此事件之后运行？

几个用法的例子,其中一个是正确的吗？

例1

export class MyApp {
   constructor() {
      $('.mydiv').hide();
   }
}

例2

export class MyApp {
   constructor() {
   }

   $('.mydiv').hide();
}

例3

export class MyApp {
   constructor() {
   }

   $( document ).ready(function() {
     $('.mydiv').hide();
   }
}

我正试图弄清楚如何在我的角度2应用程序中全局使用jQuery,到目前为止我找到的唯一合理的来源是这个stackoverflow答案但是我似乎无法让它工作.有没有办法通过npm包管理而不是tsd 实现这一点(这个命令对我不起作用,我认为它来自于打字稿,但似乎没有).

在此之后,我想我需要在app.ts文件中引用jQuery？(bootstrap.ts用来启动应用程序的主文件)

这是我的项目结构

app
  components
    app.ts
  services
  typings
  bootstrap.ts
index.html

我认为需要用于jQuery实现的代码示例很少

app.ts

import {Component, View} from 'angular2/core';

@Component({
    selector: 'app',
    templateUrl: 'app/components/app.html'
})

export class App { }

bootstrap.ts

import {App}              from './components/app';

bootstrap(App);

我有一个按钮,点击它我打开一个bootstrap模态弹出窗口.模态弹出窗口包含一些带有提交按钮的字段.我想在保存数据时关闭弹出窗口.我无法使用数据解除,因为它会在用户点击按钮后立即关闭弹出窗口.有没有办法通过打字稿关闭弹出窗口？

expense.component.html

<div id="AddExpense" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add Expense</h4>
                </div>
                <div class="modal-body">
                    <form id="form" (ngSubmit)="saveExpense();">
                        <div class="form-group">
                            <table class="table table-responsive" style="border:0">
                                <tr *ngFor="#column of columnInputs" style="height:20px;">
                                    <td class="text-right" style="padding-top:10px;border:0">
                                        <h4> {{column.name | case}}: </h4>
                                    </td>
                                    <td class="text-center" style="padding-top:10px;border:0">
                                        <input *ngIf="column.name != 'status'" type="{{column.name == 'created_Date' ? 'date' : 'text'}}" name="{{columns.name}}" required [(ngModel)]="column.value" class="form-control" />
                                        <select class="form-control" *ngIf="column.name == 'status'" [(ngModel)]="column.value" name="{{column.name}}" required>
                                            <option value="status">--Select--</option>
                                            <option value="1">Paid</option>
                                            <option value="2">Unpaid</option>
                                        </select> …

在搜索"在角度2中显示bootsrap模态"时,我遇到了以下答案:https://stackoverflow.com/a/38271918/1291122

它简单地将jQuery声明为:

declare var jQuery:any;

并用它来显示/隐藏模态,如下所示:

jQuery("#myModal").modal("hide");

这是在角度2中实现我所需要的最短路径(其他所有答案似乎都使​​它相当复杂,相当于火箭科学!)

虽然这是最短的方式,但这是推荐的方法吗？一般来说,使用角度为2+的jQuery是个好主意吗？

编辑:

我的问题不同于如何在Angular2中使用jQuery？ 因为我要求无论是(或没有)使用jQuery具有角2,而问题是关于如何使用与角2.我已经知道了,并提到如何做到这一点的jQuery.

我克隆了以下内容:https: //github.com/AngularClass/angular2-webpack-starter

我想使用jquery和bootstrap.我做:

npm install jquery bootstrap --save

然后我去vendor.ts添加导入..

import 'jquery';
import 'bootstrap/dist/js/bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

然后我去了webpack.common.js并添加到"plugins:[...]":

new webpack.ProvidePlugin({   
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery'
})    

为了测试这一点,我修改了home.component.html并在其中一个div中添加了一个id ="testdiv".

在home.component.ts中,我添加了"$('#testdiv').html('Jquery Works')".

当我运行npm时,我收到一堆错误:

error_handler.js:46 EXCEPTION: Uncaught (in promise): ReferenceError: $ is not definedErrorHandler.handleError @ error_handler.js:46next @ application_ref.js:298schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:81onError @ ng_zone.js:123onHandleError @ ng_zone_impl.js:62ZoneDelegate.handleError @ zone.js:336Zone.runGuarded @ zone.js:242_loop_1 @ zone.js:508drainMicroTaskQueue @ zone.js:515ZoneTask.invoke @ zone.js:437
error_handler.js:51 ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:51next @ …

我正在尝试对Angular 4应用程序使用jquery。我已经按照所有步骤在Angular 4上安装了jquery，但是jquery仍然无法正常工作。我已经将jQuery代码放在这样的组件上。

home.component.ts

import * as jQuery from 'jquery'
import { Component, OnInit } from '@angular/core';


 @Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

constructor(db: AngularFireDatabase,public authService: AuthService,public 
afAuth: AngularFireAuth,) { 
$(document).ready(function(){
  $("#showAppinfo").click(function(){
      $("#appinfo").slideToggle();
  });
});
ngOnInit()
{}
}

我的HTML是以下home.component.html

    <h1>This is Home page!!</h1>
    <h2 id="showAppinfo">Basic App-info</h2>
    <ul class="list-group" id="appinfo">
      <li class="list-group-item">Publiser: {{ (appinfo | async)?.Publisher }}</li>
      <li class="list-group-item">Publication_Year: {{ (appinfo | async)?.Publication_Year }}</li>
      <li class="list-group-item">Version: {{ (appinfo | async)?.Version }}</li>
      <li class="list-group-item">Registered …

我正在开发一个基于 Fomantic-UI 框架（即 Semantic-UI 的一个分支）的 Angular 项目。

我已经安装了它：

npm install --save fomantic-ui

然后我在angular.json文件中添加了以下几行：

"styles": [
    "node_modules/fomantic-ui/dist/semantic.min.css",
    "src/styles.scss"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/fomantic-ui/dist/semantic.min.js"
]

我还为它安装了类型npm install --save @types/semantic-ui，根据这个，它们应该可以与 Fomantic-UI 一起正常工作。

无论如何，这似乎不足以使用诸如modal(), dropdown(), 之类的函数calendar()，实际上我在 IDE (Webstorm) 和编译过程中都会出错：

TS2339: Property 'modal' does not exist on type 'JQuery<HTMLElement>'.

TS2339: Property 'calendar' does not exist on type 'JQuery<any>'.

TS2339: Property 'dropdown' does not exist on type 'JQuery<HTMLElement>'.

等等...

你知道在我的项目中导入 Fomantic-UI 的正确方法是什么吗？

1. 在角度2组件中使用Jquery小部件会导致角度构造其阴影dom的任何问题吗？

2. 什么是在角度2内使用jquery小部件的推荐方法？

我正在尝试通过在前端https://github.com/mwalsher/actioncable-js上集成此lib来使Rails的ActionCable与Angular2应用程序配合使用（由angular-cli引导）

我npm安装了lib，

将此添加到angular-cli-build.js

'actioncable-js/index.js',

而这在system-config.ts中：

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap',
  'lodash': 'vendor/lodash',
  'actioncable-js': 'vendor/actioncable-js'
};

/** User packages configuration. */
const packages: any = {

  'ng2-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ng2-bootstrap.js'

  },
  'actioncable-js':{
    main: 'index.js'
  },
  'moment':{
    format: 'cjs'
  },
  'lodash':{
    main: "lodash.js"
  }
};

将此添加到我的组件：

import { ActionCable } from 'actioncable-js';

但是此消息生成错误：

找不到模块“ actioncable-js”。

有人知道为什么吗？

我的猜测是缺少键入，但是我不确定如何解决此问题。

Angular 2被认为是前端开发中的完整框架.与jQuery的各种功能相比,其中一个优点是以托管方式放置前端交互.

另一方面,jQuery非常灵活,其功能可以按功能按需应用.它与纯HTML代码很好地协作,特别是视觉设计师准备好的模板.从这个角度来看,jQuery似乎更敏捷.

应用Angular 2的最佳做法是什么？它应该与jQuery,bootstrap和其他前端库/框架混合在一起吗？他们每个人应该承担什么责任？

我正在使用Angular2。我想实现可折叠的小组面板。为此，有许多使用JQuery的示例。但是，我想使用原始javascript来实现它。要使用JQuery，我也必须导入JQuery库，这可能会导致一些额外的加载。我认为除了小组讨论之外，未来的开发中可能还会有一些DOM操作。我想知道使用JavaScript或JQuery哪个更好。我知道他们之间需要权衡。在性能方面，建议采用哪种方式。推荐同时使用Angular2和JQuery吗？请给我一些建议。