Tag: angular

使用jquery查询构建器后，为什么angular2 Lifecycle Hooks无法正常工作？: 我在我的项目中导入了jquery查询构建器，如何在Angular中使用Jquery Query Builder 。 ngOnInit() { this.templateService.getTags(this.contentType) .then(tags => { this.tags = tags; }); } ngAfterViewInit() { this.getQueryBuilder(); } getQueryBuilder() { let self = this; if (self.builder) { $(self.builder.nativeElement).queryBuilder({ plugins: [‘bt-tooltip-errors’,’not-group’], filters: [{ id: ‘tag’, label: ‘Tag’, type: ‘string’, input: ‘select’, values: { 1: ‘Books’, 2: ‘Movies’, 3: ‘Music’, 4: ‘Tools’, 5: ‘Goodies’, 6: […]

从Javascript调用组件中的方法 – Angular2: 我需要从我在同一组件的构造函数中编写的Javascript调用我的Angular组件中声明的方法。我的目标是检测文件输入字段的更改并通过服务将文件上传到服务器。我在导入后添加了这个声明。 declare var $: any; 在我的构造函数中，我编写了以下代码。 $(document.body).on(“change.bs.fileinput”, “.fileinput-exists”, function () { console.log($(this).parent().find(‘.myImage’).val()); let input = $(this).parent().find(‘.myImage’); this._photoToBeSaved = input.prop(‘files’)[0]; console.log(“my file = ” + this._photoToBeSaved); //upload the image () => { this.uploadPhoto(this._photoToBeSaved); } }); 以下是同一组件中的uploadPhoto方法。 uploadPhoto(photo: any) { console.log(“here i am at upload method); // call service method to upload ….. } 但是，这不起作用。 […]

如何在Angular 4中多次重复jQuery下拉列表小部件？: 我使用jQuery UI的selectMenu小部件创建了下拉列表，如下图所示。现在我被赋予了一个任务，通过Angular 4在屏幕上重复这个元素2或3次。但是我没有得到所需的输出。显示下拉列表，但只有第一个正确，如上图所示。但是显示了另外两个下拉列表，如下图所示。（CSS样式和Javascript函数不存在）。下面给出了下拉列表的HTML。 jQuery UI Selectmenu – Custom Rendering Select an Option: Standard Screw Adjustment Tamper Resistant – Factory Set Handknob Hex Head Screw with Locknut Hex Head Screw with Locknut Hex Head Screw with Locknut 这是下拉列表的CSS。 .ui-selectmenu-category { color: #5f5f5f; padding: 0.5em 0.25em; } .ui-menu-item { } .ui-menu-item .ui-menu-item-wrapper […]

Angular2 / typescript中的Jquery轮播方法错误: 我已经安装了jquery并正确导入它。在我的应用程序的某个地方，我有一行如下， $(‘#myCarousel’).carousel(“next”); 当我执行npm start ，它会抛出错误 ‘JQuery’类型中不存在属性’carousel’。在Typescript中如果做$(‘#myCarousel’). ，**它表示适当的** intellisense，但未列出此方法。如果我评论该错误生成行，请执行npm start一切正常，然后如果我取消注释该行并刷新它，它将起作用。它是打字稿编译错误。怎么解决????

Angular：在script.bundle.js中为jquery导入意外的令牌: 我收到错误，因为Uncaught SyntaxError: Unexpected identifier”. Its take me to scripts.bundle.js , where it points to “import $ from ‘jquery’ 我通过npm安装了jQuery和jquery / types，并在angular-cli.json导入了依赖angular-cli.json 。尝试了npm缓存validation（不起作用）。迄今为止，这些解决方案都没有奏效我用了 import * as jQuery from ‘jquery’; and used it, however even after commenting out all the jquery, ” import $ from ‘jquery’ ” is still there. Dependencies: “private”: true, “dependencies”: […]

Angular / Boostrap – Navbar无法正常显示: 最近我在我的项目中添加了Bootstrap 4，jQuery和Popper，但问题是当我渲染我的网页时，它显示了这样的导航栏（它位于一个名为header的组件中）：我还加入了我的angular-cli.json： “styles”: [ “../node_modules/bootstrap/dist/css/bootstrap.min.css”, “styles.css” ], “scripts”: [ “../node_modules/jquery/dist/jquery.min.js”, “../node_modules/popper.js/dist/umd/popper.min.js”, “../node_modules/bootstrap/dist/js/bootstrap.min.js” ], HTML代码 My App/Logo with Text Nav 1 (current) Nav 2 Nav 3 dropdown Action 1 Action 2 Search

Angular2应用程序中的jQuery Datepicker。输入格式应与显示格式不同: 我正试图在我的角应用程序中使用jQuery Datepicker。从服务器我得到一个日期对象，格式为yy-mm-dd。当我将此格式设置为“dateFormat”选项时，我的日期显示为右。但我喜欢只为UI获取以下格式：dd.mm.yy。当我在选项中设置此格式时，日期1959-12-31结果为05.03.2022。如果我点击“保存”按钮，这也是我从datepicker获得的格式。所以唯一的工作格式是yy-mm-dd，如果有人可以帮助我的话会很棒。我尝试了很多其他选项，并在这里阅读了许多其他类似的问题，但我无法获得任何解决方案。我还尝试了一个隐藏的输入字段来存储备用值。这是我的Angular组件使用jQuery选择器： import {forwardRef, Input, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit, Component} from ‘@angular/core’; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from “@angular/forms”; const DATE_PICKER_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePicker), multi: true }; declare var jQuery: any; @Component({ selector: ‘jQueryDate’, template: ` `, providers: [DATE_PICKER_VALUE_ACCESSOR] }) export class […]

基础6在Angular2中的粘性元素: 这个问题构建了我之前的一个问题： ngOnDestroy和$（’＃element’）。foundation（’destroy’）; 我基本上试图在我的Angular2应用程序中使Foundations Sticky工作。除了我无法破坏Foundation元素的问题，使用ngOnDestroy() ，我总是在使用Sticky元素。我有的是这个：组件模板 Elm1 Eml2 Eml3 Eml4 可能很重要的是说wrapperDiv是直接加载的，并且在它的父ngIf中没有ngIf条件。在我的组件中，我在ngAfterViewInit使用它：零件 ngAfterViewInit(): void { $(‘#myStickyElement’).foundation(); } 当我在这个特定视图上重新加载整页时，一切都超级有效！如果我导航到此视图，则它不起作用。似乎与整页重新加载有关在某些方面，我正在创建像这样的Sticky元素： let myStickyElement = new Foundation.Sticky($(‘#myStickyElement’)); 这对行为没有任何影响，但我可以打印出对象myStickyElement 。在整页重新加载时，对象如下所示：在这里，如果我导航到页面：如您所见， myStickyElement的对象看起来有所不同。缺了点什么。有没有人遇到过这个问题？为什么整页重新加载如此不同？

Angular 2：通过UI上的用户输入/事件动态控制SVG图像/图标Css样式: 我使用Jquery在Angular 2中动态控制svg图像的Css样式。 1：使用鼠标hover等事件进行控制下面是一个简单的圆圈.svg图像的示例代码，其中定义了初始样式，并且圆圈上的鼠标hover事件将在hover圆圈时触发“func1”： .st0{ fill:#FFFFFF; stroke:#000000; stroke-width:4; stroke-miterlimit:10; } 现在定义此函数：func1（）在其相应的组件（.ts文件）中，其中包含要使用jquery更改的样式。它看起来像这样： func1(){ console.log(“func1 has been called!”); $(“.st0”).css({“stroke”:”yellow”, “fill”: “blue”}); } 尝试探索其他事件（如“点击”）。 2.通过表格输入进行控制如果要使用表单输入更改svg的样式，则应使用动态绑定。在模板中示例附加代码（以及之前的svg代码）： Stroke Fill Submit 代码需要添加到相应的组件（.ts文件）中： stroke:any; fill:any; submit(){ console.log(“submit called!”+ this.stroke+” and “+ this.fill); $(“.st0”).css({“stroke”:this.stroke, “fill”: this.fill}); }

克隆/复制DOM元素function无法正常工作: 我的问题与此不同，因为该代码无法单击克隆按钮，我已经解释了该代码如何在video的帮助下工作。我没有得到任何回应，所以等了3天后，我发布这个问题以获得进一步的帮助。我有一个非常基本的要求。当我右键单击一个元素时，它会显示一个上下文菜单，这个菜单有一个clone按钮。我想要的是当单击此按钮时，它应克隆或复制此选定元素旁边的相同元素。我面临的问题，当我右键单击>我得到菜单>当我点击克隆时，我的function将不会返回值，如果我再次右击，它将返回值，其次我无法将其附加到所选文本下方，下面是我的代码：我的editpage.ts代码，使用的函数是clone() //for clone clone(){ console.log(“clone function here”); document.addEventListener(“contextmenu”, (e) => { e.preventDefault(); console.log(e, e.srcElement.outerHTML); this.htmlstring = e.srcElement.outerHTML; }); } // code for right click context menu rightPanelStyle: Object = {}; detectRightMouseClick($event) { // disabling the default browser window which comes on right click document.addEventListener(‘contextmenu’, event => event.preventDefault()); if($event.which === […]