小编San*_*nde的帖子

在Angular 1.x中,我们可以使用ngAnimate来检测我们何时离开或进入特定路线.此外,我们可以对他们应用行为:

animateApp.animation('.myElement', function(){

    return {

        enter : function(element, done) {
            //Do something on enter
        },

        leave : function(element, done) {
            //Do something on leave
        }
    };

)};

得到这样的产品:http://embed.plnkr.co/uW4v9T/preview

我想用Angular 2.0做类似的事情,我觉得我很接近......

所以这里去,我创建了一个用于控制与导航的主要应用组件一个简单的路由器家用和有关部件.

import { bootstrap, bind, Component, provide, View } from 'angular2/angular2';
import {RouteConfig, RouteParams, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, APP_BASE_HREF, ROUTER_BINDINGS} from 'angular2/router'




/////////////////////////////////////////////////////////////////
// Home Component Start
/////////////////////////////////////////////////////////////////
@Component({
  selector: 'home-cmp'
})

@View({
  template: `
    <h2 class="title">Home Page</h2>
  `
})

class HomeCmp implements OnActivate, …

现在Angular2已经完成测试版(2.0.0-RC.0和RC.1于昨天/ 2016年5月3日发布),所有Angular 2都打包用于新的@angular命名空间下的NPM.很多软件包已被移动,现在必须单独安装,正如你在Angular2 CHANGELOG中看到的那样.

但是,CHANGELOG没有解决的一件事是如何找到angular2-polyfills以前可用的捆绑包.

我的beta代码在其中一个TypeScript文件中调用了它:

import 'angular2/bundles/angular2-polyfills';

现在我需要做什么才能使用新的包布局获得相同的功能？

这是ventdor.ts用于导入polyfill 的文件,以便webpack可以包含它:

require('./css/bootstrap.css');
require('./css/main.css');

import 'angular2/bundles/angular2-polyfills'; // THIS NO LONGER WORKS

require('./lib/bootstrap/bootstrap.js');

当我使用webpack构建应用程序时,缺少polyfill导致如下错误:

ERROR in /Users/mfo/Projects/PennMutual/angular2-oauth2/node_modules/@angular/core/src/facade/async.d.ts
(28,45): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/mfo/Projects/PennMutual/angular2-oauth2/node_modules/@angular/core/src/facade/lang.d.ts
(4,17): error TS2304: Cannot find name 'Map'.

ERROR in /Users/mfo/Projects/PennMutual/angular2-oauth2/node_modules/@angular/core/src/facade/lang.d.ts
(5,17): error TS2304: Cannot find name 'Set'.

我可以使用ComponentResolver和ViewContainerRef加载动态Angular 2组件.

但是我无法弄清楚如何将子组件的任何输入变量传递给它.

parent.ts

    @Component({
     selector: "parent",
     template: "<div #childContainer ></div>"
    })
    export class ParentComponent {
      @ViewChild("childContainer", { read: ViewContainerRef }) childContainer: ViewContainerRef;

      constructor(private viewContainer: ViewContainerRef, private _cr: ComponentResolver) {}

      loadChild = (): void => {
           this._cr.resolveComponent(Child1Component).then(cmpFactory => {               
              this.childContainer.createComponent(cmpFactory);
           });
      }
    }

child1

 @Component({
   selector: "child1",
   template: "<div>{{var1}}</div><button (click)='closeMenu()'>Close</button>"
 })
 export class Child1Component {
    @Input() var1: string;
    @Output() close: EventEmitter<any> = new EventEmitter<any>();

    constructor() {}

    closeMenu = (): void => {
      this.close.emit("");
    }
 }

所以在上面的例子中说loadChild是按一下按钮调用,我可以加载Child1Component,但是如何传递var1child的输入？另外如何订阅 …

我正在使用Node.js,Express.js和Mongodb的组合为移动客户端应用程序开发RESTful API.现在我正在尝试处理用户配置文件图像的上传,我发现了一个名为"multer"的模块(这是由express.js团队本身推荐的模块),它允许express.app处理multipart/form-数据请求.现在我需要测试应用程序,而且还需要上传功能,但我无法模拟http表单请求(通过postman chrome插件).Multer返回此错误:

[错误:多部分:未找到边界]

实际上,将http表单请求(有效)与自定义http请求进行比较,第二个请求没有Boundary标头属性.

边界属性是什么？

我有一堆列表项,并希望在点击后突出显示每个项目.这对我来说很容易用jQuery甚至JavaScript做,但是当谈到Angular2时我就迷失了.

<ul>
   <li [attr.data-selected]="false" (click)="highlightItem($event)" [class.highlight]="isHighlighted($event)" *ngFor="#item of items"> {{item}} </li>
</ul>

我的组件

export class HelloWorld {
    items = ["pineapples", "apples", "tomatoes", "bread"];

    highlightItem(event) {
        event.target.setAttribute("data-selected", "true");
   }

   isHighlighted(event) {
       return event.target.getAttribute("data-selected") == "true";
    }
}

不知道我的错误在哪里,或者我是否使用了错误的方法

我在本教程后面的应用程序中实现了Routing

http://docs.angularjs.org/tutorial/step_07

我无法让我的版本在IE7中工作,并且花了一段时间试图弄清楚我错过了什么/做错了我注意到这个例子不起作用.

http://angular.github.com/angular-phonecat/step-7/app/

任何人都知道如何让这个工作？

我来自传统的后端Java/Spring环境学习Angular 2 framework,并且很难掌握许多基本概念.

我正在阅读使用TypeScript的Manning书Angular 2 Development,它说我需要HTTP-server运行我的SAP's.这是为什么？

我以为Angular在客户端机器上运行.那么服务器的功能到底是什么？如果我只是打开HTML,Angular不做它的魔力.

我正在使用Angular2和TypeScript组合一个应用程序(大规模).它需要分成许多项目,每个项目都有许多组件,每个组件都有一个.html视图,.css样式表和.ts逻辑/类.

我希望每个项目都能编译成一个*.js文件并复制到一个将在IIS中运行的主机网站.这类似于构建WPF或Silverlight应用程序的方式,.xaml所有文件都被编译到.dll.

我已经浏览了一下网页,并且能够使用该选项将.ts文件构建到单个.js文件中--outFile.但这对我的.html文件或文件没有帮助css.

任何帮助都将非常感激,即使它是说我要求的是不可能的:-)

斯蒂芬

我使用的是使用XML而不是JSON的API.有关如何将以下XML转换为JSON或如何在ngFor指令中正确使用数据的任何建议？

此外,观察是否适合这里？

<case-file>
  <serial-number>123456789</serial-number>
    <transaction-date>20150101</transaction-date>
      <case-file-header>
       <filing-date>20140101</filing-date>
      </case-file-header>
 // ...
   <classifications>
  <classification>
   <international-code-total-no>1</international-code-total-no>
   <primary-code>025</primary-code>
  </classification>
 </classifications>
 </case-file>
 <case-file>
     <serial-number>234567890</serial-number>
    <transaction-date>20160401</transaction-date>
      <case-file-header>
       <filing-date>20160401</filing-date>
      </case-file-header>
//...
   <classifications>
  <classification>
   <international-code-total-no>1</international-code-total-no>
   <primary-code>042</primary-code>
  </classification>
 </classifications>
</case-file>

export class apiService {
   constructor (private http: Http) {}

   private _apiUrl = 'app/api';  

   getCaseFile () {
     return this.http.get(this._apiUrl)
//conversion to JSON here?
                    .map(res => <CaseFile[]> res.json().data)
                     .catch(this.handleError);
   }
    private handleError (error: Response) {

     console.error(error);
    return Observable.throw(error.json().error || 'Server error');
   }
 }

<div *ngFor="#cf of case-file">{{case-file.serial-number}}</div>

如何使用Angular CLI使用以下命令使用最新的Angular 4版本创建新项目:

ng new new_project

我安装了以下版本

 - @angular/cli: 1.0.0-rc.2
 - node: 7.7.3
 - npm: 4.4.1