小编Eri*_*nez的帖子

我已经在CustomHttp 中读取了Access EventEmitter Service等问题,其中用户在其服务中使用了EventEmitter,但是他在本评论中建议他 不要使用它,而是直接在他的服务中使用Observables.

我还阅读了这个 问题 ,解决方案建议将EventEmitter传递给子节点并订阅它.

我的问题是:我应该,还是不应该手动订阅EventEmitter？我该怎么用？

我是棱角分明的新手,我一直在努力学习更多关于angular2的信息.我按照入门指南创建了angular2-quickstart项目.但是当我运行命令npm start时,浏览器启动但是1秒后一切都失败了.以下是我的npm错误日志文件的内容:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'lite' ]
2 info using npm@3.3.12
3 info using node@v5.2.0
4 verbose run-script [ 'prelite', 'lite', 'postlite' ]
5 info lifecycle angular2-quickstart@1.0.0~prelite: angular2-quickstart@1.0.0
6 silly lifecycle angular2-quickstart@1.0.0~prelite: no script for prelite, continuing
7 info lifecycle angular2-quickstart@1.0.0~lite: angular2-quickstart@1.0.0
8 verbose lifecycle angular2-quickstart@1.0.0~lite: unsafe-perm in lifecycle true
9 verbose lifecycle angular2-quickstart@1.0.0~lite: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/home/bakary/angular2-quickstart/node_modules/.bin:/usr/local/lib/node_modules/npm/bin/node-gyp-bin:/home/bakary/angular2-quickstart/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games
10 verbose lifecycle angular2-quickstart@1.0.0~lite: CWD: /home/bakary/angular2-quickstart
11 silly lifecycle angular2-quickstart@1.0.0~lite: Args: …

我正在尝试使用Typescript和SystemJS工作Angular2,但我遇到了导入问题.

使用此导入(或任何其他angular2导入)

import {bootstrap} from 'angular2/platform/browser';

我得到Webstorm和tsc编译错误(WS:无法解析目录,tsc:找不到模块),即使jspm_packages/npm/angular2@2.0.0-beta.0中有angular2

我的目录结构是

browser
    components
        app.component.ts
    bootstrap.ts
    index.html
node_modules
jspm_packages
jspm.config.js
package.json
tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "filesGlob": [
    "!./node_modules/**/*.ts",
    "!./jspm_packages/**/*.ts",
    "./**/*.ts"
  ]
}

并在jspm.config.js中配置

System.config({
    defaultJSExtensions: true,
    transpiler: "typescript",
    paths: {
        "github:*": "../jspm_packages/github/*",
        "npm:*": "../jspm_packages/npm/*"
    }})

这段代码以某种方式工作,但编译器似乎很困惑,有更好(或正确)的方法如何做到这一点？谢谢

我在这方面已经有一段时间了，很多文章，文档，很多试验和错误，但我觉得我错过了一些核心。

本质上，我正在尝试创建一个可扩展的导航组件，其他组件可以在将项目添加到页面时向其中添加项目。我已经尝试通过几种方式来实现这一点，包括服务，这个例子我试图通过将一个组件注入另一个组件来尝试它。

我有一个包含项目列表的组件，我有一个 ngFor 循环遍历项目并显示文本。我在页面上有一个按钮，当您单击该按钮时，会将一个项目添加到数组中。我还将组件注入到另一个组件中，我在 NgOnInit() 上向数组中添加了一个项目（尝试了其他生命周期事件并在构造函数中）。

奇怪的是，当按钮将项目添加到数组时，列表会更新，但是当其他组件添加项目时，列表不会更新 UI，即使项目数增加，我可以在 UI 中看到该组件具有已经加载并呈现了默认项目。

import {Component} from 'angular2/core'; 
import {Router, RouteParams} from 'angular2/router'; 
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; 
import {Injectable} from 'angular2/core';

@Component({
    selector: 'caseBasedSearchSidebar',
    template: `<ul id="sidebar-wrapper" class="clearfix nav navbar-default sidebar-nav">
                  <li *ngFor="#nav of navigationItems">
                    <span>{{nav.name}}</span>
                  </li>
           <ul>  <button (click)=addNavigationItem()>Add</button> `,
directives: [ROUTER_DIRECTIVES] })

@Injectable() export class SidebarComponent {
    public navigationItems: Array<ISideNavigationItem>;

    constructor() {
        this.navigationItems = [{ name: 'test' }];
    }

    public addNavigationItem(item: ISideNavigationItem) {
        this.navigationItems.push({ name: 'test' });
    } 
}

export …

具有RxJs的角度1.5分量的伪代码:

component('demo', {
  template: `<div>
            <div ng-if="verificationFailed">Sorry, failed to verify</div>
            <button ng-if="continueEnabled">Continue</button>
            <button ng-click="verify()">Verify</button>
            </div>`,
  controllerAs: 'ctrl',
  bindings: {
    someOptions: '='
  },
  controller: ($scope, someService) => {
    var ctrl = this;

    ctrl.continueEnabled = false;

    ctrl.verificationFailed = false;

    ctrl.verify = function() {
      Rx
      .Observable
      .interval(10 * 1000)
      .timeout(2 * 60 * 1000)
      .flatMapLatest(_ => { someService.verify(ctrl.someOptions.id)})
      .retry(1)
      .filter((result) => { result.completed })
      .take(1)
      .subscribe(_ => {
        $scope.$evalAsync(_ => {
          ctrl.continueEnabled = true
        });
      }, _ => {
        $scope.$evalAsync(() => {
          ctrl.verificationFailed …

当我点击撰写按钮以打开电子邮件模板时（例如；当点击撰写邮件时在 gmail 中给出），在单页中使用多个模板的辅助路由。

问题是：如何在单击十字按钮时删除或停用此辅助路由。

应用程序

   @RouteConfig([
    {
     path: '/',
     name: 'OpportunityList',
     component: OpportunityComponent,
     useAsDefault: true
    },
    {
     path: '/detail',
     name: 'Detail',
     component: DetailComponent
    },
    {
     aux: '/mailer', 
     name: 'Mailer', 
     component: MailerComponent
     }
   ])

应用程序.html

    <a [routerLink]="['/', ['Mailer'] ]" >Compose</a>

邮件程序组件.ts

   export class MailComponent implements OnInit{
      closeEmail(){
          console.log("please suggest me to Deactivate this template")
       }
    }

邮件程序.component.html

   <div class="header with-bord">
     <h3 class="title">New Message <a (click)="closeEmail()" class="close"><i class="fa fa-times"></i></a></h3>
    </div>