小编Egg*_*ggy的帖子

使用扩展语法和带有typescript的新Set()

我使用以下代码来获取唯一的数字:

let uniques = [ ...new Set([1, 2, 3, 1, 1]) ]; // [1, 2, 3]
Run Code Online (Sandbox Code Playgroud)

但是,typescript报告跟随错误:类型"Set"不是数组类型. 我不是打字稿忍者,有人能告诉我这里有什么问题吗?

javascript typescript ecmascript-6 spread-syntax

68
推荐指数
6
解决办法
2万
查看次数

如何订阅一次事件发射器?

// 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)

rxjs eventemitter angular2-services rxjs5 angular

26
推荐指数
1
解决办法
2万
查看次数

添加占位符以在angular2中选择标记

我有一个只包含表单的简单组件:

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)

angular

24
推荐指数
4
解决办法
3万
查看次数

使用带有角度2组件的flexbox

我想更新我的角度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状态.

javascript css css3 flexbox angular

12
推荐指数
1
解决办法
1万
查看次数

数组构造函数未按预期工作

我想创建具有固定长度的空数组,然后使用.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上进行了测试.

javascript

7
推荐指数
1
解决办法
175
查看次数

为什么“想要”不是“最新”?

我正在使用它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

node.js npm

6
推荐指数
1
解决办法
3240
查看次数

如何设置webpack以便每次都不重新编译角度?

最近我开始研究简单的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

webpack angular

5
推荐指数
1
解决办法
3940
查看次数

在两个单独的成功 http 请求后触发回调

我的应用程序在 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)

javascript rxjs typescript angular

4
推荐指数
1
解决办法
1264
查看次数