小编Ron*_*der的帖子

过去使用已弃用的路由器,路由到同一组件的一些组件:

一些组件

import {Component, Injector} from 'angular2/core';
import {IDataServiceSome} from './IDataServiceSome';
import {RouteData} from 'angular2/router';

@Component({
    selector: 'Some',
    templateUrl: './Some.html'
})
export class Some {
    Model;
    DataService: IDataServiceVendor;

    constructor(routeData: RouteData, injector: Injector) {
        var dataServiceToken = routeData.get('DataServiceToken');
        this.DataService = injector.get(dataServiceToken);
        this.Model = DataService.getSomeModel();
    }
}

IDataServiceSome

export interface IDataServiceSome {
    getSomeModel(): Object;
}

例如Comp1,但有Comp2,Comp3等......

import {Component} from 'angular2/core';
import {RouteConfigs, Router, ROUTER_DIRECTIVES} from 'angular2/router';

import {DataServiceSome1} from './IDataServiceSome1';

@RouteConfigs([
    { path: '/Some', name: 'Some', component: Some, data: { DataServiceToken: DataServiceSome1 …

我有以下两个组成部分:

覆盖

@Component({
    selector: 'overlay',
    template: '<div class="check"><ng-content></ng-content></div>'
})
export class Overlay {
    save(params) {
        //bunch of stuff that are commonly used
    }
}

myComponent(还有很多这样的)

@Component({
    selector: 'myComponent',
    directives: [Overlay],
    template: '<overlay><form (ngSubmit)="save({ name: 'sam', lastName: 'jones' })">I'm the component. Click <input type="submit">Here</input> to save me!</form></overlay>'
})
export class MyComponent {

}

没有抛出错误,这个解决方案不起作用,Angular2只是跳过两个组件初始化.无论如何,我想你在这里得到了这个想法.有一个共同的组件需要包装很多其他组件,因此它需要是通用的.它有一个template服务不做的工作.我没有使用自定义注释,也许他们可以做这样的事情？有关如何实现这种功能的任何想法？

注意:叠加层包含逻辑和模板,这些都是需要使用它的任何其他组件所需要的.该模板是一个复杂的模态对话框,包含动画,消息,淡入淡出等......这在整个解决方案中很常见.

更新

发现这个:Angular2:progress/loading overlay指令

试图升级到Angular2 rc1,但似乎npm无法下载软件包:

{
  "name": "App",
  "version": "1.0.0",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",

    "systemjs": "0.19.27",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
     "gulp": "3.9.1",
     "gulp-rimraf": "0.2.0",
     "gulp-uglify": "1.5.3",
     "gulp-concat": "2.6.0",
     "gulp-cssmin": "0.1.7",
     "gulp-replace": "0.5.4"
   }
}

和输出:

npm http GET https://registry.npmjs.org/es6-shim
npm http GET https://registry.npmjs.org/reflect-metadata
npm http GET https://registry.npmjs.org/angular/common
npm http GET https://registry.npmjs.org/angular/compiler
npm http GET https://registry.npmjs.org/angular/core
npm http GET https://registry.npmjs.org/angular/platform-browser-dynamic
npm http GET …

尝试将Angular2与TypeScript一起使用,这意味着从node_modules文件夹导入.我有node_modules内置npm安装在他们的默认状态,主项目文件夹,但引用.js任何给定网页中的任何脚本将导致浏览器中找不到404错误.尝试删除node_modules,仍然没有工作.因此经过大量的尝试和失败后,令人惊讶的是,即使在一个全新的ASP.NET 5项目中,预先安装和配置了所有内容,浏览器也无法访问引用的.js脚本node_modules或导入类型(它会对这些脚本进行ajax调用)在TypeScript文件中引用,并失败).

显然,与DNX和ASP.NET 5,有一个排斥node_modules在tsconfig.json和project.json伴随着wwwroot.所以我试图删除该选项,然后在编译时遇到此错误:

"指定的路径,文件名或两者都太长.完全限定的文件名必须少于260个字符,目录名必须少于248个字符."

有趣的是,我可以在.ts文件中导入类型和模块,它在设计器中工作正常,这意味着它可以识别导入的类型.但是在运行时,我仍然为那些导入的模块和主要的Angular2脚本获得404s node_modules.欢迎任何建议,因为我没有选择.

环境

1. Visual Studio Professional 2015 Update 1
2. DNX 4.6.1和5.0
3. Chrome版本49,Firefox版本43,IE版本11

更新

这是文件夹结构:

MyWebApplication
    project.json
    package.json
    ...
    -node_modules
    ...
    -wwwroot
    ...
       -ts
         -pages
              orders-page.ts
       tsconfig.json
       typings.json
    ...

以下是_Layout.cshtml,orders-page.ts及其错误tsconfig.json和project.json的屏幕截图: