小编Hit*_*mar的帖子

JSBin:如何获得ES6/Babel标签?

我正在学习JavaScript.我正在使用在线编辑器Jsbin来运行javascript.我想将ES6与Babel一起使用.我看过一些教程或JSBins在编辑器中有babel选项卡.有关详细信息,请参阅屏幕截图.我无法弄清楚如何ES6/Babel在JSbin中获取此选项卡.有人可以帮我这个吗?谢谢.

截图

javascript jsbin

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

Angular2:RouterModule的导出,为什么需要它?

我正在从官方文档中学习Angular 2应用程序路由.我正在通过以下代码.

import { NgModule }             from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
  { path: '', redirectTo: 'contact', pathMatch: 'full'},
  { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
  { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}
Run Code Online (Sandbox Code Playgroud)

它创建AppRoutingModule并定义routes它.我无法理解的部分是为什么我们需要再次导出RouterModule?我相信它是核心角度模块之一,可以通过导入随处可用@angular/router.

angular2-routing angular

18
推荐指数
1
解决办法
5193
查看次数

TypeScript:为什么我可以在构造函数中修改 `readonly` 属性?

我有以下打字稿片段:

class Jedi { 
  private readonly name: string = 'Skywalker';
  constructor(name: string) { 
    this.name = name; //Why I am able to modify name.
  }
  toString():string {
    return this.name;
  }
}

var jedi = new Jedi('Kenobi');

console.log(jedi.toString()); //Kenobi
Run Code Online (Sandbox Code Playgroud)

正如您在代码中看到的,我已将name属性声明为readonly. 据我所知,将属性声明为我们readonly在 TypeScript 中使用的常量。一旦我们用初始化声明它,我们就不能修改它。

但是正如您在 constructor 它正在修改中所看到的那样。此外,TypeScript 编译器也不会对此发出警告。不确定这是 TypeScript 中的错误还是有意为之。谁能解释一下?

typescript

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

为什么我能够改变角度常数?

我正在玩角度常数.我观察到我能够改变它的价值constant.我无法得到它.为什么我能够改变价值.我正在创建这样的常量:

var app = angular.module('app', []);
app.constant('Type', {
  PNG: 'png',
  GIF: 'gif'
});
app.constant('serialId', 'aRandomId');
Run Code Online (Sandbox Code Playgroud)

即使我使用angular.valuethen 创建常量,我也可以更改它.要更改常量的值,我在控制器中执行此操作:

app.controller('MainController', ['$scope', 'Type', 'serialId', '$timeout', function($scope, Type, serialId, $timeout) {
  $scope.data = {
    type: Type,
    serialId: serialId
  };
  $timeout(function() {
    Type.PNG = 'this is changed';
    serialId = 'new Serial Id';
    console.log(serialId);
  }, 1000);
}]);
Run Code Online (Sandbox Code Playgroud)

通过对常数的定义,我所获得的是不变的,它的价值不会改变并且具有固定值.MDN说,一旦声明了常量,如果常量不是对象,则无法更改它.例如.

const x=10;
x=20;//will throw the error.
const obj={};
obj.a='ab'; //will not throw error.
Run Code Online (Sandbox Code Playgroud)

但是在角度不变的情况下,当我改变值时没有任何反应.它甚至不会通知值已更改.而且文档也没有谈到改变常量的值.如果我们可以像普通的javascript变量那样改变角度常量的值那么为什么它们被称为常量?这里的小提琴演奏

javascript angularjs

9
推荐指数
1
解决办法
4327
查看次数

TypeScript:标记模板文字显示错误

我试图使用ES5的标记模板文字与打字稿,但似乎类型脚本没有完全支持它.我有以下一段代码.

class TemplateLiterals { 
    age: number = 24;
    name: 'Luke Skywalker'
    private tag(strings: string[], personExp, ageExp) :string{
        var str0 = strings[0]; // "that "
        var str1 = strings[1]; // " is a "
        var ageStr;
        if (ageExp > 99) {
            ageStr = 'centenarian';
        } else {
            ageStr = 'youngster';
        }
        return str0 + personExp + str1 + ageStr;
    }
    toString() {
        return this.tag `that ${ this.name } is a ${ this.age }`;
    }
}
Run Code Online (Sandbox Code Playgroud)

toString方法中,typescript向我显示以下错误.

Argument …
Run Code Online (Sandbox Code Playgroud)

javascript typescript template-literals

8
推荐指数
1
解决办法
2256
查看次数

在Angular 2中捕获ng-content上的事件

我正在阅读本教程以理解角2 ng-content.我想捕获触发的事件ng-content.我有以下组件:

@Component({
    moduleId: module.id,
    selector: 'card',
    template: `
    <ng-content (click)="onClick($event)"></ng-content>
    `
})
export class CardComponent {

    onClick(){
        console.log('clicked');
    }
}
Run Code Online (Sandbox Code Playgroud)

在这里,您可以看到我正在为该click事件设置一个监听器.但由于某些原因,它并没有触发.似乎整个ng-content标签都被替换了.所以为了捕获当前我正在做的事件:

template: `
    <div (click)="onClick($event)">
      <ng-content></ng-content>
    </div>
    `
Run Code Online (Sandbox Code Playgroud)

有没有更好的方法来做到这一点?因为我不想我的包裹ng-content成一个div,以避免造型的问题.谢谢.Plnkr

angular2-ngcontent angular

8
推荐指数
3
解决办法
2775
查看次数

Angular 2:忽略ngOnChanges的第一次触发?

是否有任何角度2方式跳过ngOnChanges的第一个触发器?目前我正在使用这种天真的方法来忽略它:

isFirst: boolean = true;

  ngOnChanges(changes: SimpleChanges) {
    if (this.isFirst) {
      this.isFirst = false;
      return;
    }
    console.log(changes);
  }
Run Code Online (Sandbox Code Playgroud)

angular

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

Jasmine:超时 - 在超时内未调用异步回调

我需要测试一个AngularJs服务,该服务从url加载图像.这是我的服务:

/*global angular, Image*/
(function () {
  'use strict';
  function SourceLoader($q, $log) {

    /**
     * Load an image from url and return a promise which is resolved when image is loading is done.
     * It return the images object as resolved promise.
     * @param url source of the image
     * @returns {Promise} unresolved promise of image.
     */
    function loadImage(url) {
      var deferred = $q.defer(),
          image = new Image();
      image.onload = function () {
        deferred.resolve(image);
      };
      image.onerror = function (error) { …
Run Code Online (Sandbox Code Playgroud)

javascript unit-testing angularjs karma-jasmine

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

了解CSS Float

我倾向于HTML和CSS.我被float财产混淆了.我不是为什么这让我很困惑.我正在使用这些文章 理解.当我们应用float元素被放出正常流程并且根据它的值浮动到它的父级的左侧和右侧时,我得到了这个部分,float并且它下面的内容将围绕它流动并尝试包装它.我困惑的部分是我将通过例子解释.我有三个div A,B,C.正如我在片段中分享的那样:

body {
  background: #eaeaed;
}
div{
  border : 2px solid #ff00ff;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.divA{
  background: yellow;
}
.divB{
  background: green;
}
.divC{
  background: blue;
}
Run Code Online (Sandbox Code Playgroud)
<div class="divA">
  <span>Div A</span>
</div>
<div class="divB">
  <span>Div B</span>
</div>
<div class="divC">
  <span>Div C</span>
</div>
Run Code Online (Sandbox Code Playgroud)

现在,当我申请float:leftdivA.它被移出流程并divB占据它的位置.但是我无法理解divB中的文本发生了什么.为什么B和C的文本正在折叠/重叠.我的意思是当A浮动时,它应该被移出流程并且下面的元素应该取而代之,但不知道为什么只有divB它占据它的位置但是B的内容仍然存在.谢谢你的帮助.

body {
  background: #eaeaed;
}
div{
  border : 2px solid #ff00ff;
  width: …
Run Code Online (Sandbox Code Playgroud)

html css css-float

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

Angular 2:如何从浏览器控制台在 angular2 中启用调试

AngularJS 中,我们有一个函数叫做reloadWithDebugInfo()

angular.reloadWithDebugInfo()
Run Code Online (Sandbox Code Playgroud)

在打开调试信息的情况下重新加载当前应用程序。可以在浏览器控制台中执行此功能并启用调试。我正在寻找它在Angular 2 中的等价物,它可以让我们在开发者控制台中启用调试。但似乎没有可以在浏览器控制台中访问的等效功能。我知道有类似的功能enableDebugToolsdisableDebugTools它让我们启用和禁用调试,但在浏览器控制台一个不能访问它们。而且要访问 angular2 的调试武器,如ng& ng.probe,必须首先启用调试工具,如Angular 2 应用程序调试指南中所述

确保您的应用程序禁用了生产模式,以便您可以访问下面描述的所有方法。

我只想知道有没有办法在 Angular 2 中使用控制台启用调试工具?

debugging angular

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