我使用以下代码来获取唯一的数字:
let uniques = [ ...new Set([1, 2, 3, 1, 1]) ]; // [1, 2, 3]
Run Code Online (Sandbox Code Playgroud)
但是,typescript报告跟随错误:类型"Set"不是数组类型. 我不是打字稿忍者,有人能告诉我这里有什么问题吗?
// Part of service
public someEvent: EventEmitter<number> = new EventEmitter();
....
// Component
@Component({
selector: 'some-component',
template: `...`
})
export class SomeComponent {
constructor(public service: Service) {
this.service.someEvent.subscribe((x) => {
// Do something
});
}
}
Run Code Online (Sandbox Code Playgroud)
SomeComponent在/路线中显示.当我在我的应用程序中导航到不同的路径并再次返回时,SomeComponent将再次订阅该事件,导致回调触发两次.如何订阅一次事件或取消订阅组件的破坏并再次订阅?
// Can't subscribe after.
ngOnDestroy() {
this.service.someEvent.unsubscribe();
}
Run Code Online (Sandbox Code Playgroud) 我有一个只包含表单的简单组件:
import {Component, FORM_DIRECTIVES, NgFor} from 'angular2/angular2';
@Component({
selector: 'test-component',
directives: [FORM_DIRECTIVES, NgFor],
template: `
<form class="form-inline" (ng-submit)="onSubmit()" #form="form">
<div class="form-group">
<select class="form-control"
[(ng-model)]="model.server"
ng-control="server"
#server="form"
required>
<option selected hidden>placeholder</option>
<option *ng-for="#server of servers"
[value]="server">{{ server | uppercase }}
</option>
</select>
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" value="Load"
[disabled]="!form.form.valid">
</div>
</form>
`
})
export class TestComponent {
public model: Model = new Model();
public servers: string[] = ['a', 'b', 'c'];
onSubmit(): void {
// Complicated logic.
// Reset form. …Run Code Online (Sandbox Code Playgroud) 我想更新我的角度2应用程序的可视化侧(网格,颜色).旧的布局是用bootstrap 4构建的,我不再需要了.我决定使用普通的css3,并使用flexbox构建网格.我在codepen上预览了这个网格.
但是项目中的实施很难,我现在卡住了.我们来看一个例子:
import {Component} from 'angular2/angular2';
@Component({
selector: 'some-component',
template: `
<aside class="col-4 main-aside"></aside>
<section class="main-section center"></section>
`
})
export class SomeComponent { }
Run Code Online (Sandbox Code Playgroud)
如果我在其中引导此组件,例如.container我可能会得到以下结果:
<body>
<!-- .container is flex parent -->
<div class="container">
<some-component>
<!-- .main-aside and .main-section should be flex children -->
<aside class="main-aside"></aside>
<section class="main-section center"></section>
</some-component>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
正如您所看到的那样,flex链父 - >子因为它们之间的组件"选择器"而被破坏.我通过添加样式来解决这个问题:display: flex; width: 100%;来自chrome dev工具的组件选择器,但是我不知道如何从代码角度进行这项工作,也不是最好的方法.
我真的很感激任何帮助,因为我不知道如何解决这个问题,除了不使用flexbox.
我正在使用角度2.0.0-alpha.44
是的,我知道角度的alpha状态.
我想创建具有固定长度的空数组,然后使用.map它来返回新数组.但是,它没有按预期工作.
根据mdn docs:
如果传递给Array构造函数的唯一参数是0到232-1(含)之间的整数,则返回一个长度设置为该数字的新JavaScript数组.
new Array(3)回报[undefined × 3].不应该是:[undefined, undefined, undefined]?
让我们考虑以下示例:
1)不工作.
var a = new Array(3);
a.map((x, i) => i); // [undefined × 3]
Run Code Online (Sandbox Code Playgroud)
2)工作.
var a = Array.apply(null, new Array(3));
a.map((x, i) => i); // [0, 1, 2]
Run Code Online (Sandbox Code Playgroud)
我在最新的Google Chrome Canary上进行了测试.
我正在使用它npm outdated -g --depth=0来查看哪些全局安装的软件包具有较新的版本。我得到这个:
$ npm outdated -g --depth=0
Package Current Wanted Latest Location
bower 1.6.8 1.6.8 1.7.1
jshint 2.8.0 2.8.0 2.9.1-rc2
jspm 0.16.13 0.16.13 0.16.19
npm-windows-upgrade 1.0.1 1.0.1 1.2.0
typescript 1.7.3 1.7.3 1.7.5
Run Code Online (Sandbox Code Playgroud)
我无法更新任何这些软件包。npm update -g什么也没做。为什么Wanted字段的版本低于Latest?我使用的是 Windows 7、节点 4.2.1 和 npm 3.5.2
最近我开始研究简单的HTML5画布游戏+ angular2用于路由,显示高分等等.因为我没有接触angular2核心,所以我不想重新编译所有内容并将所有内容捆绑成一个大文件.更多我更喜欢angular2核心+ http +路由器,我的应用程序在单独的文件中.
现在我得到了近5MB的捆绑,甚至更大.map,在浏览器中加载时暂停我的电脑很短的时间(鼠标卡住,音乐停止播放片刻,如半秒)这非常烦人(我猜,它是因为捆绑大小).我可以使用多个入口点来完成这项工作吗?
这是我的webpack配置:
module.exports = {
devtool: 'source-map',
entry: './src/app/bootstrap',
output: {
path: __dirname + '/dist', publicPath: 'dist/', filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.ts']
},
module: {
loaders: [
{
test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
}
]
}
};
Run Code Online (Sandbox Code Playgroud)
我使用角度2.0.0-beta.0和webpack 1.12.2
我的应用程序在 init 上的根组件从我的服务中调用两个异步函数来获取数据。我想知道在它们都完成后如何调用函数。我正在使用 angular 2.0.0-alpha.44 和 typescript 1.7.3
import {Component, OnInit} from 'angular2/angular2';
import {ServiceA} from './services/A';
import {ServiceB} from './services/B';
@Component({
selector: 'app',
template: `<h1>Hello</h1>`
})
export class App {
constructor(
public serviceA: ServiceA,
public serviceB: ServiceB
) { }
onInit() {
// How to run a callback, after
// both getDataA and getDataB are completed?
// I am looing for something similar to jQuery $.when()
this.serviceA.getDataA();
this.serviceB.getDataB();
}
}
Run Code Online (Sandbox Code Playgroud)
serviceA.getDataA并且serviceA.getDataB是简单的 http get 函数:
// Part …Run Code Online (Sandbox Code Playgroud) angular ×5
javascript ×4
rxjs ×2
typescript ×2
css ×1
css3 ×1
ecmascript-6 ×1
eventemitter ×1
flexbox ×1
node.js ×1
npm ×1
rxjs5 ×1
webpack ×1