小编Pic*_*cci的帖子
NgrxStore和Angular - 大量使用异步管道或在构造函数中只订阅一次
我开始关注ngrx Store,看到使用Angular异步管道的便利性.同时我不确定是否大量使用Angular异步管道是一个不错的选择.
我举一个简单的例子.让我们假设在同一模板中我需要显示从Store检索的对象(例如Person)的不同属性.
一段模板代码可以
<div>{{(person$ | async).name}}</div>
<div>{{(person$ | async).address}}</div>
<div>{{(person$ | async).age}}</div>
而组件类构造函数将具有
export class MyComponent {
person$: Observable<Person>;
constructor(
private store: Store<ApplicationState>
) {
this.person$ = this.store.select(stateToCurrentPersonSelector);
}
.....
.....
}
据我所知,这段代码暗示了3个订阅(通过异步管道在模板中制作)到同一个Observable(person$).
另一种方法是person在MyComponent中定义1个property()并且只有1个订阅(在构造函数中)填充属性,例如
export class MyComponent {
person: Person;
constructor(
private store: Store<ApplicationState>
) {
this.store.select(stateToCurrentPersonSelector)
.subscribe(person => this.person = person);
}
.....
.....
}
而模板使用标准属性绑定(即没有异步管道),例如
<div>{{person.name}}</div>
<div>{{person.address}}</div>
<div>{{person.age}}</div>
现在的问题
这两种方法在性能方面有什么不同吗？是否大量使用异步管道(即大量使用订阅)会影响代码的效率？
推荐指数
解决办法
查看次数
angular2复选框ng-model未更新
我正在尝试使用Angular 2.0进行简单的操作我希望将模型绑定到"输入复选框",使用方法注册"更改",在复选框状态更改时执行方法并根据模型的状态执行操作.一切正常,但是当执行与change事件链接的方法时,模型的状态与我的预期相反,即当选中该复选框时为false,当取消选中该复选框时为true.这是代码片段;
<input value={{object.name}} type="checkbox" [(ng-model)]="object.selected" (change)="onChange(object.selected)">
关于我做错了什么的任何想法？
推荐指数
解决办法
查看次数
Angular2:启动应用程序时出错"http:// localhost:3000/traceur 404(Not Found)"
我有一个全新的Angular(rc1)安装.我想我刚刚创建了通常的'Hello something'应用程序但是,当我从浏览器启动应用程序时,我在浏览器控制台上收到以下错误
谁能解释一下我做错了什么？我必须有一些错误,因为其他更复杂的东西在我的机器上与rc1完美配合.
提前致谢
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'm2t-app',
template: `
Hello something
`,
directives: []
})
export class AppComponent {
}
main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
的index.html
<html>
<head>
<title>MEAN2 Training Class</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-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 --> …推荐指数
解决办法
查看次数
Angular2 - 将http注入自定义服务时,"无法解析所有参数"错误
我已经构建了一个ErrorHandlerLogger,它是一个扩展ErrorHandler并将错误消息记录到远程存储库的服务.
ErrorHandlerLogger需要HttpModule提供的Angular http客户端.
在ErrorHandlerModule中,我导入HttpModule并将ErrorHandlerLogger定义为提供者.
在AppModule中我导入ErrorHandlerModule.
当我启动应用程序时,我收到以下错误消息
Uncaught Error: Can't resolve all parameters for ErrorHandlerLogger: (?).
在这里我的代码
ErrorHandlerModule
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';
import {ErrorHandlerLogger} from './error-handler-logger';
@NgModule({
declarations: [],
exports: [],
imports: [
HttpModule
],
providers: [
{provide: ErrorHandler, useClass: ErrorHandlerLogger}
]
})
export class ErrorHandlerModule {}
ErrorHandlerLogger
import { ErrorHandler } from '@angular/core';
import { …推荐指数
解决办法
查看次数
Angular CLI输出 - 如何分析bundle文件
我正在使用Angular CLI构建一个使用该--prod开关进行生产的应用程序.该包在dist目录中创建.有没有办法知道哪些类和函数在树形图形和所有其他步骤后实际放入了包中？
推荐指数
解决办法
查看次数
Angular2 HTTP - 如何理解后端服务器已关闭
我正在开发一个前端,它使用服务器提供的JSON服务.
我很高兴使用Angular2的HTTP,我可以通过.catch()运算符捕获错误.
如果我发现与特定服务相关的问题(例如,服务未由服务器定义),则catch()运营商会收到Response状态404,我可以轻松管理该情况.
另一方面,如果服务器完全关闭,则catch()操作员会收到带有状态代码的响应,200并且没有与问题原因相关的特定标志或文本(即整个服务器已关闭).在控制台上,我看到angular(http.dev.js)写了一条消息,net::ERR_CONNECTION_REFUSED但我不知道如何在我的代码中做一些类似的事情(即理解正在发生的事情并做出适当的反应).
任何帮助,将不胜感激.
推荐指数
解决办法
查看次数
使用forRoot()导入模块
我将通过Angular2 Material的示例,我看到所有Material模块都是使用该forRoot()方法在根模块中导入的.所以在我的应用程序中我也这样做.
现在我需要在其他Shared模块中使用一些Material组件,这意味着我需要在Shared模块中导入相关的Material包.我不清楚forRoot()在共享模块中导入它们时是否还需要使用该方法.
在此先感谢您的帮助
推荐指数
解决办法
查看次数
节点http-server用index.html响应任何请求
我已在http-server全球安装.
我在localhost端口8080上从myDir启动它.在myDir中我有index.html.
如果我(从浏览器)请求http://localhost:8080/我得到index.html,这是好的.
如果我请求虽然http://localhost:8080/anything我没有从服务器得到任何响应.
相反,我想要的是我的服务器总是使用index.html响应任何到达端口8080上的localhost的http请求.
这可能吗.
提前致谢
推荐指数
解决办法
查看次数
同时测试Angular Library,库组件和示例应用程序
我使用官方指南和其他帖子创建了一个Angular库(例如来自@Todd Palmer的https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5).
该库非常简单,它只包含一个组件component.ts及其测试component.spec.ts.
与图书馆一起,我还有一个示例应用程序,在那里我展示了如何使用component.ts.示例应用程序app.component.ts由其自己的测试表示app.component.spec.ts.
我的工作区的脚手架是由Angular CLI(v 6.0.8)创建的.工作区的结构,至少对于我怀疑与我的案例更相关的文件,如下所示
workspace
- projects
- library-name
- src
- lib
- component.ts
- component.spec.ts
- test.ts
- karma.config.ts
- src
- app
- app.component.ts
- app.component.spec.ts
- karma.config.ts
- angular.json
如果我ng test library-name只运行测试component.spec.ts运行.
如果我在ng test没有指定库名的情况下运行,因为我想测试组件和示例应用程序,会发生以下情况:
- 一个浏览器由业力自动打开
app.component.spec.ts运行测试,结果显示在刚刚打开的浏览器上- 如果我用ctrl + C停止进程,则新进程启动并执行测试
component.spec.ts(即第一个测试进程的中断启动第二个测试进程) - 如果我再次使用ctrl + C停止测试,那么最终一切都会停止,我将返回命令行
我的问题是,如果有一种方式来运行的两个测试app.component.spec.ts和component.spec.ts在同一进程中.
推荐指数
解决办法
查看次数
从本地目录加载 npm 包，无需复制不必要的文件/文件夹，例如 node_modules
假设我必须开发一个 npm 包my-package，它需要由my-project导入和使用。
在开发my-package 时，我需要从 npm 安装和使用其他包。在my-package开发结束时，我将所有相关文件捆绑在dist目录中。由于我不想将node_modules文件夹中的所有文件作为发布包的一部分，我在.gitignore（或.npmignore）中指定排除node_modules文件夹。所以my-package文件夹的最终结构看起来像
my-package
dist
... // all the code of the package to be distributed
node_modules
... // all the node modules
src
... // all source files
package.json
.gitignore
现在我在 npm 存储库上发布my-package，然后使用命令将其导入my-projectnpm i my-package。
作为这种导入的结果，托管my-project的目录结构类似于
my-project
... // stuff
node_modules
my-package
dist
... // all …推荐指数
解决办法
查看次数
标签 统计
angular ×7
angular-cli ×1
checkbox ×1
httpserver ×1
karma-runner ×1
ngrx ×1
node.js ×1
npm ×1
npm-install ×1
npmignore ×1
tree-shaking ×1