6

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

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

你能帮我吗 ？

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

感谢提前

4

4 回答 4

6

同意，这没有得到很好的解释，许多示例仅在单个文件中使用单个组件或组件。这是我正在构建的一个示例，它在单独的文件中使用（当前）2个组件，并且尽可能简单......

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

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

export default NoteComponent;

并将其导入到组合或父模块中......

import NoteComponent from "note";

哦，这个导入/导出的东西是 ES6 模块语法，这里有很好的参考

希望这可以帮助。

于 2015-05-21T13:17:14.970 回答
2

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

这是一个示例http://plnkr.co/edit/F2gNplix1tBSg3iZmkd0?p=preview

这个例子有三个文件：main.es6.js和a1.es6.js- a2.es6.jsplunker 系统将这些文件转换成main.js,a1.js和a2.js

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

于 2015-05-19T22:53:41.527 回答
0

这是为每个组件制作文件夹的示例。

如果您app.ts在根目录下，您可以创建一个文件夹/components/并将每个组件放入一个单独的子文件夹中，将每个组件的 .ts、.html 和 .css 文件一起保存在其文件夹中。因此，如果您有一个名为“Actions”的组件，您可以将actions.ts,actions.html和actions.css放入文件夹/components/actions/中。

在actions.ts你提到这一点：

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

并包含actions在 app.ts 中：

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

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

<actions></actions>
于 2015-07-02T08:21:21.027 回答
0

根据官方参考，只需将template属性更改为templateUrl：

@Component({
  selector: 'my-app',
  //template: `Hi, {{name}}`,
  templateUrl: './app.html'
})
export class AppComponent  { name = 'Peter'; }
于 2017-01-07T20:51:35.003 回答