小编Roh*_*ing的帖子

我有大量数据要显示在屏幕上。我需要提供一个简化的列表，以便用户可以选择其中一个项目并查看其详细信息。

所以想象我有一个组件 SimpleListComponent，它将保存数据并呈现一个简化的视图

export class SimpleListComponent{
    @Input() data: any[];
}

html

<ul>
    <li *ngFor="let item of data">
        <a>{{item.name}}</a>
    </li>
</ul>

用户应该能够单击其中一个项目并在新选项卡中打开包含该项目详细信息的视图。所以如果我有第二个组件

export class DetailedViewComponent{
    @Input() item: any;
}
<div>
    <!--All fields of item here-->
</div>

编辑：这里的问题是我从一个非常定制的搜索中呈现数据，所以我没有一个 ID 来从服务器获取详细信息或以任何其他方式再次获取数据。所以唯一的方法就是以某种方式传递已经加载的数据。

我怎样才能在角度上实现这一目标？将项目数据提供给第二个组件并在新选项卡中打开它？

如果我使用任何类型的导入或导出指令编写.ts，则将结果.js加载到HTML页面中时将产生以下错误：“ ReferenceError：未定义导出”

繁殖方法：

1. 在VS中创建一个空白的Node.js Web应用程序项目
2. 添加带有导入或导出行的.ts
3. 添加一些HTML调用生成的.js
4. 启动HTTP服务器（http-server -g [port]）并访问您的HTML

我试过了：

• 定位ES 5
• "module": "commonjs"从tsconfig.json中删除行
• 安装CommonJS和SystemJS
• 使用.ts编译 tsc
• 其他任何解决方案Stack Overflow也有类似的问题
• 以上所有可能的排列。

我的.ts（如果有导入说明，可以是任何东西）：

import { setTimeout } from "timers";
setTimeout(() => console.log("asdf"), 1000);

HTML仅有一个引用脚本的简单主体

我的package.json

{
  "name": "nodejs-web-app4",
  "version": "0.0.0",
  "description": "NodejsWebApp4",
  "main": "server.js",
  "author": {
    "name": ""
  },
  "devDependencies": {
    "@types/node": "^8.0.14"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "lib": ["es6"],
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

结果.js：

从VS构建（导致ReferenceError: exports is …