我是角度2的初学者,我想让我的第一个应用程序工作.我正在使用TypeScript.我有app.component.ts,其中我已经向另一个名为todos.component的组件发出了指令,但是我在编译时遇到以下错误:
[0] app/app.component.ts(7,3): error TS2345: Argument of type '{ moduleId: string; selector: string; directives: typeof TodosComponent[]; templateUrl: string; s ...' is not assignable to parameter of type 'Component'.
[0] Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.
我的代码是这样的:
的index.html
<html>
<head>
<title>Angular 2 QuickStart</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/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script …我在这个项目中使用Angular 2 Material sidenav:
<md-sidenav-layout>
<md-sidenav #start mode="side" [opened]="true">
<md-nav-list>
</md-nav-list>
</md-sidenav>
<button md-button (click)="start.toggle()">Close</button>
<router-outlet></router-outlet>
</md-sidenav-layout>
如何start.toggle()使用click事件从我的组件调用而不是元素？
谢谢你的阅读
正如标题所说,我想拥抱rxjs Observables的力量.
我现在应该做什么:
// dataview.html
<div *ngIf="isLoading">Loading data...div>
<ul *ngIf="!isLoading">
<li *ngFor="let d of data">{{ d.value }}</li>
</ul>
// dataview.ts
data: any[] = [];
isLoading: boolean = false;
getData() {
this.isLoading = true;
this._api.getData().subscribe(
data => {
this.data = data;
this.isLoading = false;
},
error => {
this.error = error;
this.isLoading = false;
});
}
我想做的事:
1. async在我的模板中使用管道
创建data一个Observable数组
仍显示用户的加载信息
我是干净代码的忠实粉丝,那么如何使用rxjs和Angular 2很好地完成这项工作呢？
我创建了一个简单的GRPC服务器和客户端.
我想要做的是在服务器中创建自定义错误并将其传递给客户端.我的代码如下:
Server.js
var error = require('error');
var PROTO_PATH = grpc.load(__dirname + '/proto/hello.proto');
var hello_proto = PROTO_PATH.hello;
function sayHello(call, callback) {
try {
var jsErr = new Error('MY_ERROR');
jsErr.newStatus = 401;
jsErr.newMessage = 'custom unAuthorized error';
console.log(Object.getOwnPropertyNames(jsErr));
console.log(jsErr);
callback(jsErr);
} catch(e) {
callback(e);
}
}
function sayHelloAgain(call, callback) {
callback(null, {message: 'Hello Again ' + call.request.name});
}
function main() {
var server = new grpc.Server();
server.addProtoService(hello_proto.Hello.service, {sayHello: sayHello,sayHelloAgain: sayHelloAgain });
server.bind('0.0.0.0:50051', grpc.ServerCredentials.createInsecure());
server.start();
}
main();
Client.js
var grpc = require('grpc'); …我一直在决定选择Google App Engine Standard Vs.灵活的环境,适合现实世界的生产.我想肯定使用Java.需要使用Firebase(最新版本)进行身份验证和推送通知; 我不确定新Firebase是否兼容标准版或灵活版.
根据以下链接中的注意事项,我的印象是最近的Firebase兼容仅适用于灵活环境.
https://cloud.google.com/solutions/mobile/firebase-app-engine-android-studio
environment standards google-app-engine firebase app-engine-flexible
我想在我的Angular 2应用程序中进行路由时禁用更改URL.
我知道skipLocationChange: true必须作为NavigationExtras参数传递给路由器.
我的问题是:
我尝试过的:
<h1>
{{title}}
</h1>
<ul>
<li><a [routerLink]="['route1', { skipLocationChange: true }]">Route1</a></li>
<li><a [routerLink]="['route2', { skipLocationChange: true }]">Route2</a></li>
</ul>
<router-outlet></router-outlet>
但它不起作用.
单击链接后,路径将更改为 http://localhost:4200/route2;skipLocationChange=true
我不想this.router.navigate(['route1], {skipLocationChange: true)在我的控制器中使用,因为那时我失去了routerLinkAtive突出显示.
我刚刚开始为我的应用程序编写e2e测试,并且遇到了Protractor和ngrx/effects的超时问题.
我每隔几分钟调度一次动作有以下效果:
@Effect() setSessionTimer$ = this.actions$
.ofType(Auth.ActionTypes.SET_SECONDS_LEFT)
.map(toPayload)
.switchMap(secondsLeft => Observable.concat(
Observable.timer((secondsLeft - 60) * 1000).map(_ => new Auth.SessionExpiringAction(60)),
Observable.timer(60 * 1000).map(_ => new Auth.SessionExpiredAction())
));
尝试运行Protractor测试会导致测试超时并出现以下错误,因为Angular不稳定.
失败:超时等待异步Angular任务在11秒后完成.这可能是因为当前页面不是Angular应用程序.有关更多详细信息,请参阅常见问题解答:https: //github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular 在等待带定位符的元素时 - 定位器:By(css选择器,.工具栏标题)
根据这个问题(https://github.com/angular/protractor/issues/3349)我需要使用NgZone在Angular之外运行一个Observable区间.我尝试了不同的组合this.ngZone.runOutsideAngular()但没有工作,测试继续超时.
例如,这不起作用:
@Effect() setSessionTimer$ = this.actions$
.ofType(Auth.ActionTypes.SET_SECONDS_LEFT)
.map(toPayload)
.switchMap(secondsLeft => this.ngZone.runOutsideAngular(() => Observable.concat(
Observable.timer((secondsLeft - 60) * 1000).map(_ => new Auth.SessionExpiringAction(60)),
Observable.timer(60 * 1000).map(_ => new Auth.SessionExpiredAction())
)));
我不知道如何在Angular之外运行效果.有没有人成功测试过他们的ngrx应用程序？
我在Angular 2中处理数据表.
我<table-component>是一个常规的<table>内部我正试图<tr>使用Angular的*ngFor 来增加s,就像这样:
<tr *ngFor="#person of persons; #i = index">
每个<tr>都有几个领域,一个checkbox有一个label.
我设置了checkbox类似的id属性:
<input type="checkbox" id="checkbox{{i}}">
<label for="checkbox{{i}}">{{person.finished}}</label>
其中{{i}}是ngFor的局部变量.它工作正常,但仅适用于复选框.
当我尝试为atrribute"for"做同样的事情时,label我只会得到错误.
Unhandled Promise rejection: Template parse errors:
Can't bind to 'for' since it isn't a known native property ("
<div>
<input type="checkbox" id="checkbox{{i}}">
<label [ERROR ->]for="checkbox{{i}}">{{person.finished}}</label>
</div>
</td>
我的问题是:
如何使用Angular 2的ngFor设置标签的"for"属性,因此它们指向右侧的复选框？
我正在构建一个 Angular 2 应用程序并使用 Chart.js 2.0 来显示“时间”数据。不幸的是，我无法更改 moment.js 的语言环境。
我 npm 安装了 moment 并使用 SystemJS 导入了 moment.js 和 pl.js，但是 Chart.js 抱怨必须在 Chart.js 之前加载 moment.js（不确定如何实现，在每个源文件中，moment 都在 chartjs 之前声明）。
然后我尝试了 Chart.bundle.min.js（包括 moment），它可以工作，但只能用英语。我无法将语言环境更改为“pl”。
以下行对 Chart.bundle.min.js 没有影响，日期仍以英文显示。
moment.locale('pl');
Chart.js 是否有自己的功能来更改语言环境？文档没有指定关于帽子的任何内容。
我创建了一个自定义的自动完成表单控件，它成功地实现ControlValueAccessor并将Validator其集成到一个响应式表单中。自定义表单控件内的输入元素使用ngModel.
如果表单组件返回的对象包含数字 ID，则表单组件的值是有效的。
例如{ id: 1, name: 'Test' }将是一个有效的对象。
一切正常，但不幸的是 input 元素ng-valid应用了CSS 类，因为它不是响应式验证过程的一部分（它使用 ngModel）。
input 元素已经appInput directive应用了我自己的元素，因此我可以访问所有与表单相关的类，例如NgControl, 或FormGroupDirective。
这是我的自定义自动完成模板：
<input
#searchTerm
appInput
type="search"
[ngModel]="name"
(ngModelChange)="keyupSubject.next($event)"
/>
它在一个reactive formGroup：
<div [formGroup]="parentFormGroup">
<div class="col-sm-11">
<app-autocomplete
formControlName="name">
</app-autocomplete>
</div>
</div>
我曾尝试ngControl和setErrors我appInput指令内，但CSS类还是不能设置。
@Input()
set errors(errors) {
const control = this._ngControl;
control.control.setErrors(errors);
}
如何将自定义表单控件中的输入元素设置为无效？
我特别询问ng-invalid输入元素上的CSS 类。
angular ×8
javascript ×3
typescript ×2
chart.js ×1
environment ×1
firebase ×1
grpc ×1
momentjs ×1
ngrx ×1
ngrx-effects ×1
node.js ×1
observable ×1
protractor ×1
rxjs ×1
standards ×1
systemjs ×1
zone.js ×1