小编PzY*_*Yon的帖子

Angular2中的注射剂

我正在玩Angular2.作为基础,我使用了angular.io页面中的quickstart项目.

一切似乎工作正常,但一旦我尝试注入一个service(ItemService)到我的AppComponent我得到以下异常:

Token(ComponentRef)实例化期间出错!ORIGINAL ERROR:无法解析AppComponent的所有参数.确保它们都具有有效的类型或注释.

我在互联网上看到过类似的问题(包括stackoverflow,例如这篇文章),但它们似乎都没有解决我的问题.有没有人知道,问题可能是什么?

我还看到了一些解决方案(例如Angular2 repo中的解决方案),它们使用Injectable-annotation 来装饰注入类.然而,这对我不起作用,因为它没有定义angular.d.ts.我使用的是错误的版本吗?

您可以在以下Plunker中找到我的解决方案:http://plnkr.co/edit/7kK1BtcuEHjaspwLTmsg

为了记录,您还可以在下面找到我的两个文件.请注意,app.jsPlunker中的JavaScript文件是从我下面的TypeScript文件生成的JavaScript文件,例外总是相同的.

index.html:

<html>
    <head>
        <title>Testing Angular2</title>
        <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
        <script src="https://jspm.io/system@0.16.js"></script>
        <script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script>
    </head>
    <body>
        <app></app>
        <script>
            System.import('js/app');
        </script>
    </body>
</html> 
Run Code Online (Sandbox Code Playgroud)

js/app.ts:

/// <reference path="../../typings/angular2/angular2.d.ts" />

import {Component, View, bootstrap, For, If} from "angular2/angular2";

class Item {
    id:number;
    name:string;

    constructor(id:number, name:string) {
        this.id = id;
        this.name = name;
    }
}

class ItemService …
Run Code Online (Sandbox Code Playgroud)

typescript angular

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

Angular2中的ng-switch

我正在玩角度2(目前版本为alpha 26).ng-forng-if例如工作正常.但我确实遇到了问题ng-switch.我只是无法让它工作,即没有打印.似乎整个模板都被忽略了.

这是我的组件的代码,也可以在github上找到:

import {Item} from "js/types/item";
import {Component, View, NgFor, NgIf, NgSwitch} from "angular2/angular2";

@Component({
    selector: "item-details",
    properties: [
        "item"
    ]
})
@View({
    template: `<span>You selected {{item.name}},</span>
               <span [ng-switch]="item.name">
                 <template [ng-switch-when]="'Bill'">
                   <span> who is often called Billy.</span>
                 </template>
                 <template [ng-switch-when]="'Bob'">
                   <span> who is often called Bobby.</span>
                 </template>
                 <template [ng-switch-default]">
                   <span>who has no nickname.</span>
                 </template>
               </span>
               <div *ng-if="item.subItems">
                 <h2>Sub items:</h2>
                 <ul>
                   <li *ng-for="#subItem of item.subItems">{{subItem.name}}</li>
                 </ul>
               </div>`,
    directives: [NgFor, NgIf, NgSwitch]
}) …
Run Code Online (Sandbox Code Playgroud)

typescript ng-switch angular

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

在 npm 脚本中将节点环境变量设置为动态值

我想在 npm 脚本中动态设置一个环境变量。

我正在使用,cross-env因为我正在 Windows 上开发,并且服务器是基于 Unix 的。我想用当前日期 ( new Date())初始化一个环境变量,以便我可以在我的中访问和呈现它create-react-app

这有效(硬编码字符串):

"scripts": {
  "start": "cross-env-shell REACT_APP_BUILD_DATE=\"currentDate\" react-scripts-ts start",
}
Run Code Online (Sandbox Code Playgroud)

显然,currentDate不应是字符串,而是以下表达式的结果:new Date().

我怎样才能做到这一点?换句话说:如何评估一些常规 JavaScript 并将其结果用作 npm 脚本?或者这是不可能的?

node.js npm create-react-app npm-scripts

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

Angular 2:"全球"生命周期挂钩?

TL; DR

我们正在使用Angular 2构建一个应用程序,并希望注册一个"全局" ngOnInitngOnDestroy功能.对于"全局",我的意思是该函数是针对每个组件执行的,而不需要为每个组件显式实现.这可能吗?

详细

一些(但不是全部)组件需要在加载(例如ngOnInit)后在全局服务中注册某些内容,并在卸载后再次注销(例如ngOnDestroy).以下是我能想到的两种方法:

  • 在每个需要这样做的组件中实现这个逻辑(in ngOnInitngOnDestroy).
  • 在基类中实现此逻辑,该基类调用由子类实现的抽象方法,这些子类指定需要注册/未注册的内容.

这两种方法都不令人满意:

  • 在第一个我需要一遍又一遍地实现整个逻辑.是的,我知道,我可以将"锅炉板" - 代码放在帮助器类或其他东西中.但它似乎有点隐含,"隐藏"在常规的Angular生命周期中.具有发言名称(例如,接口/基类)似乎更明确.
  • 在第二个类中需要扩展相同的公共基类.但是,如果他们还应该扩展其他一些基类(多重继承)呢?

这就是我提出以下想法的原因:

为什么不用可以由所有必需组件实现的接口替换上面提到的抽象类.然后我会登记其上每执行一个全局函数ngOnInitngOnDestroy所有组件(如果可能的话-例如一个模块,路由等中).在函数中,我将检查组件是否实现了接口,如果是,则调用相应的函数以获取要注册的类型特定的东西.

我的问题

  • Angular 2可以这样做吗?即,可以注册"全球生命周期钩子"(或类似的东西)?
  • 或者这是一个完全错误的方法呢?
  • 还有其他更好的想法吗?

angular

3
推荐指数
1
解决办法
935
查看次数