`angular2`如何导出组件？

Question

我正在创建这样的组件:(来自示例)

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1> ~ My First Angular 2-0 App By Gulp Automation ~ </h1>'
})

export class AppComponent { } //what it is exporting here?

并导入到另一个模块:

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component' //what it's imports here

bootstrap(AppComponent); //it works.

在index.html中:

<script>
      System.config({
        packages: {        
          app: {
            format: 'register', //what is means?
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

我无法理解背后的逻辑,任何人都能帮助我吗？

提前致谢.

Answer 1

我认为这些链接可以帮助您:https://angular.io/guide/quickstart和https://daveceddia.com/angular-2-dependencies-overview/.

实际上,SystemJS负责实现模块逻辑以及它们之间的链接.这就是为什么你需要systemjs在HTML页面中包含SystemJS文件()并使用它来配置它System.config,最后加载Angular2应用程序的主要组件System.import.

您在启动时明确使用SystemJs System.import.在应用程序的其他元素中,隐式使用该工具,尤其是在使用TypeScript时.在这种情况下,简单import就足以导入另一个模块.如果您查看已转换的文件(JavaScript文件),您将看到使用了SystemJS.

附录SystemJS配置(https://angular.io/docs/ts/latest/quickstart.html#!#systemjs)可以为您提供有关Angular2应用程序的SystemJS配置的一些提示

以下是有关模块格式(块中的format属性System.config)的文档的链接:https://github.com/systemjs/systemjs/blob/master/docs/module-formats.md.通过使用属性的register值format,您可以指定System.register用于定义模块.

希望它对你有帮助,蒂埃里