Question

我实际上正在制作angular.io快速入门，现在我需要将我的组件拆分成不同的文件。

问题是我根本不知道怎么做，而且在开发预览文档中没有解释。

你能帮忙吗？

我只有两个组件（主要在app.js中，另一个只列出信息）

感谢您提前

Answer 1

同意，这没有得到很好的解释，很多例子只在一个文件中使用一个或多个组件。这是我正在构建的一个示例，它在单独的文件中使用（当前）2个组件，并且就像我可以做到的那样简单......

https://github.com/mdausmann/angular2-canvas

基本上，您需要从其模块中导出子组件...

export default NoteComponent;

并将其导入到撰写或父模块中......

import NoteComponent from "note";

哦，这个导入/导出的东西是ES6模块语法，great ref here

希望这有帮助。

Answer 2

这个例子是ES6，但同样的原则适用于任何语言。您只需使用导入，确保将代码转换为适当的文件并适当地配置模块加载器。

以下是http://plnkr.co/edit/F2gNplix1tBSg3iZmkd0?p=preview

的示例

此示例包含三个文件：main.es6.js，a1.es6.js和a2.es6.js - plunker系统将这些文件转换为main.js，a1.js和{{1} }

a2.js中的系统选项告诉模块加载器如何找到这些选项，以便index.html从已编译的import {A1} from 'a1'文件中找到该类。

Answer 3

以下是为每个组件创建文件夹的示例。

如果app.ts位于根目录，则可以创建文件夹/components/并将每个组件放入单独的子文件夹中，将每个组件的.ts，.html和.css文件保存在一起在其文件夹中。因此，如果您有一个名为＆＃39;操作＆＃39;的组件，您可以将actions.ts，actions.html和actions.css放入文件夹/components/actions/。

在actions.ts中你提到了这个：

@Component({
    selector: 'actions'
}
@View({
    templateUrl: './components/actions/actions.html'
})
export class Actions { ... }

并在app.ts中包含actions：

import {Actions} from '../../components/actions/actions';
@View({
    templateUrl: 'app.html',
    directives: [Actions]
})

在app.html中只包含操作选择器：

<actions></actions>

Answer 4

根据official ref，只需将template属性更改为templateUrl：

@Component({
  selector: 'my-app',
  //template: `Hi, {{name}}`,
  templateUrl: './app.html'
})
export class AppComponent  { name = 'Peter'; }

Angular 2，拆分不同文件中的组件

4 个答案: