天道酬勤,学无止境

angular

Calling Angular2 Component methods from Console in Production mode

问题 有没有办法在生产模式下调用组件或服务方法? 我知道可以使用ng.probe和 Angular2 调试应用程序 Augury 调试应用程序:https://augury.angular.io/ 但是,这些仅在开发模式下有效。 回答1 以下是您如何在生产模式下从控制台访问组件对象(至少在 Angular 9 中)。 首先,您需要找到对应于 Angular 组件的 HTML 元素。 您可以使用类似window.getAllAngularRootElements()[0].getElementsByTagName('my-component-tag')[0]东西。 或者您也可以先在 Inspector 工具中找到并选择组件,然后使用特殊变量$0 。 然后,如果这个元素对应于某个 Angular 组件,那么它将附加一个特殊的__ngContext__属性。 它包含 Angular 使用的一组不同组件的属性。 数组的一项是组件对象本身。 项目的索引可能不同,因此您需要自己检查__ngContext__数组才能找到它。 即,简单地说,做类似的事情: o = window.getAllAngularRootElements()[0].getElementsByTagName('my-component-tag')[0].__ngContext__[42]; (假设 42

2022-07-11 09:53:47    分类:技术分享    angular

How to create an observable within an observable in Angular2

问题 我可能会离开这个过程,但这里是: 我有一个 angular2 服务。 此服务的数据源将是本地存储...稍后在使用 http 的数据库调用返回时可选地更新。 因为我想在各种来源返回时更新返回的数据,所以我想使用 observables。 现在,我只是想把这个概念放下来,所以我跳过了本地存储方面......但我包括了“背景故事”,所以它(有些)对我为什么想要做这在多种方法中。 我的想法是我将有一个“getHTTPEvents()”方法,该方法将返回一个 observable,其有效负载是来自 DB 的事件。 (理论是在未来的某个时候我也会有一个'getLSEvents()'方法可以在那里捎带) 为了模拟它,我有以下代码: private eventsUrl = 'app/mock-events.json'; getHTTPEvents() : Observable<Array<any>> { return this._http.get(this.eventsUrl) .map(response => response.json()['events']) .catch(this.handleError); // handle error is a logging method } 我的目标是创建一个方法,允许过滤返回的事件,但仍向服务用户返回一个 observable。

2022-07-11 09:50:51    分类:技术分享    javascript   typescript   angular   rxjs

Module '"/Users/***/my-app4/src/app/datepicker/datepicker.component"' has no exported member 'DatepickerModule'

问题 我已经问过以下问题。 ngx-bootstrap datepicker 不起作用现在我面临一个新问题。 我分离了文件,出现了新的错误。 /Users/ /my-app4/src/app/app.component.ts (2,10) 中的错误:模块 '"/Users/ /my-app4/src/app/datepicker/datepicker.component"' 没有导出成员“日期选择器模块”。 你可以帮帮我吗? app.component.ts import { Component } from '@angular/core'; import { DatepickerModule } from './datepicker/datepicker.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'app'; } app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '

2022-05-17 05:32:07    分类:技术分享    angular   ngx-bootstrap

Angular2: Update all color assignments in CSS dynamically

问题 我有一个 Angular 2 应用程序,我想在其中实现用户从预定调色板列表中选择他们的颜色主题的能力。 当他们选择主题时,颜色、背景颜色等的所有相关实例都将更改为主题调色板中相应的新颜色。 有什么方法可以从 Angular 控制器实现这一点? 我知道您可以使用 [class.className] 或 [ngClass] 有条件地将类添加到特定元素,但显然在大型应用程序中必须单独更改每个属性的样式是不切实际的。 具体用例:(单击)附加到“更新主题”按钮的侦听器由用于更改 .css 文件中的 css 颜色值的控制器函数处理。 有没有人在 Angular2 中实现了动态/用户控制的主题/颜色? 关于如何解决这个问题的任何建议? 回答1 兄弟,Angular Material 团队开发了一个非常酷的功能。 https://github.com/angular/material2/blob/master/guides/theming.md 如果您想查看一个工作示例 https://material.angular.io/ 在导航栏中有一个主题选择器。

2022-05-17 05:29:30    分类:技术分享    css   angular   themes   angular2-template

Angular - How to get current url in app component

问题 我试图在AppComponent中获取应用程序的当前 url,但它总是返回根路径/ 。 例如,如果我在新选项卡中访问/users ,预期的结果应该是/users ,但是当我在控制台中检查时,它会显示/ 。 但是,当我在子组件中执行相同操作时,它会起作用。 以下是我的代码: import {Component} from '@angular/core' import {ActivatedRoute, Router} from '@angular/router' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['app.component.scss'], }) export class AppComponent { constructor(router: Router) { console.log(this.router.url) // return '/' } } 这怎么可能? 回答1 您可以订阅router.events并过滤NavigationEnd事件以获取当前活动的路由 url。 this.router.events.subscribe((e) => { if (e instanceof NavigationEnd) { console.log(e

2022-05-17 05:17:03    分类:技术分享    angular   angular-router

Add header and timeout request globally

问题 我做了一个拦截器服务来查看请求的错误是否为 401(未经授权)以转到登录页面并显示和隐藏全局加载。 但是仍然需要使用此服务(拦截器服务)全局添加标头,而不是在每个请求上添加标头。 其次,如果请求在这 30 秒内没有回复响应,我还需要添加超时(30000),我在每个有效的请求上都手动尝试了它,但我遇到了 hideLoadding 的问题,因为我也全局配置了加载。 拦截器服务代码: export class HttpInterceptor extends Http { public loaderService: LoaderService constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, public events: Events) { super(backend, defaultOptions); } get(url: string, options?: RequestOptionsArgs): Observable<Response> { return this.intercept(super.get(url, options)); } post(url: string, body: string, options?: RequestOptionsArgs): Observable

2022-05-17 05:14:03    分类:技术分享    angular   ionic2   ionic3

Angular2 Flickr JSONP

问题 我对 AngularJS 很陌生。 我正在使用 Angular2 制作 Flickr 公共提要应用程序,但遇到了这个问题。 我找不到让 JSONP 工作的方法。 我应该怎么做才能返回 JSON 对象? 这是代码 flickr.service.ts import { Injectable } from '@angular/core'; import { Jsonp, Http } from '@angular/http'; //use jsonp module to fetch the data from the api call import 'rxjs/Rx'; // use rxjs as the observable @Injectable() export class FlickrService { url: string; apiKey: string = 'ffed2ef9dede27481c3195eea1be61eb'; constructor(private _jsonp: Jsonp) { this.url = `https://api.flickr.com/services/feeds/photos_public.gne?&api_key=${this.apiKey}&per_page=12&format=json&nojsoncallback=1`;

2022-05-17 05:11:05    分类:技术分享    angular   jsonp

Ionic - Change import library based on IsDebugMode

问题 我可以使用IsDebugMode切换导入库吗? 我可不可以做: if (IsDebugMode) { import { SQLiteMock, SQLiteObject } from '../mocks/SQLiteMock'; } else { import { SQLite, SQLiteDatabaseConfig, SQLiteObject } from '@ionic-native/sqlite'; } 回答1 不,很遗憾,您不能有条件地导入库。 您可以做的是导入两个库,在构造函数中注入两者,然后有条件地使用 isDevMode(),(不存在 isDebugMode()),您可以在每种情况下使用您喜欢的任何内容。 虽然这不是一个很好的解决方案,因为这意味着您将在内存中加载两个库,并且由于您将它们注入构造函数中,因此在构建时发生的 treeshaking 不会忽略它们。 如果这是谨慎地完成,它甚至可能不会有所作为(消极地)。 我建议您在运行时使用开发工具对内存大小进行基准测试,如果有显着的收益超过清洁方法的手动性质,那么当您完成使用该 Mock 开发功能时,只需替换导入中的 Mock 类。 回答2 即使某些插件在浏览器上运行应用程序时可能会工作(使用ionic serve时),我还是喜欢注入插件的模拟版本,以避免控制台中出现警告(或由于找不到cordova

2022-05-17 05:09:09    分类:技术分享    angular   typescript   ionic-framework

How to show data for the Hour in Highchart

问题 我在当天的 Highchart 上显示系列数据。 现在在 1 天内有 24 小时显示我在 Y 轴上显示 24 小时标签。 现在,问题在于某些元素数据包含前一天的数据。 例如: 当我选择 3 月 26 日数据时,它包含从午夜开始的 3 月 25 日数据,这些数据被遗漏并且未绘制在图表中。 有什么方法可以绘制上个月的系列数据。 我的 Highchart 配置代码: highchartsConfiguration: any = { chart: { zoomType: 'x', plotBackgroundColor: 'rgba( 191, 192, 194, 0 )', events: { click(e) { if (!($(event.target)[0].textContent)) { PlotBandService.plotBandClicked(moment(e.xAxis[0].value).utc().format('YYYY-MM-DD HH:mm:ss')); } }, }, }, title: { text: '', }, yAxis: { title: { style: { 'font-family': 'Arial', 'font-size': 12, 'font-weight': 'bold', }, }, allowDecimals: false

2022-05-17 05:08:03    分类:技术分享    angular   highcharts

HTML5 video play() not playing ionic 3 "ios and android

问题 我一直在寻找很长时间并尝试了很多方法,但似乎没有任何效果。 我有一个视频标签,当我点击它时我想播放它。 我正在研究 Ionic 3 和 Angular。 代码如下所示。 如果我错过了什么,请帮助我或指导我。 HTML: <video id="edit-video-element" width="100%" [src]="videoPath" webkit-playsinline poster="{{thumbnailPath}}" controls autobuffer > </video> .ts 文件 this.video = document.getElementsByTagName('video')[0]; onVideoClick(e) { (this.video.paused) ? this.video.play() : this.video.pause(); } 它没有显示任何问题,但根本不起作用。 更新: <video *ngIf="hasVideo" width="100%" controls autoplay> <source [src]="videoPath" type="video/mp4"> </video> 我添加了这个,然后在 .ts 文件中我的 videoPath 为: file:///private/var/mobile/Containers

2022-05-17 05:03:07    分类:技术分享    html   angular   ionic-framework   ionic2   ionic3