如何在没有 Typescript 的情况下在 Angular 2 中创建可重用组件答案

【问题标题】：How Do I Create A Reusable Component in Angular 2 Without Typescript如何在没有 Typescript 的情况下在 Angular 2 中创建可重用组件
【发布时间】：2016-02-10 06:33:13
【问题描述】：

在我为 Angular 2 找到的示例中，可以为每个应用创建一次组件，如下所示：

(function(app) { 
  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App</h1>'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

使用 app/main.js 引导组件：

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platform.browser.bootstrap(app.AppComponent);
  });
})(window.app || (window.app = {}));

但是我该如何定义一个可重用的组件呢？文档似乎是用 Typescript 或 Angular 1 编写的。

【问题讨论】：

ESx 文档正在进行中。
是的，文档是在制品，这就是我在这里寻求帮助的原因:)
当然没问题 :)

标签： angular

【解决方案1】：

默认情况下，每个组件都是可重用的。您可以在其他组件的模板中将其用作directive，例如<my-app></my-app>（对于根应用程序组件可能不是最好的主意，但对于其他任何东西，例如<my-user-details [user]="user"></my-user-details>）。重用组件的另一种方法是使用 Angular 2 路由器导航到具有不同路由配置的相同组件。

这完全取决于您如何构建组件，通常您最终会得到smart（具有功能）和dumb（仅布局）组件，这些组件将被重用最多。

【讨论】：

你说得对，使用 my-app 并不能说明我想要实现的目标。我认为我的困惑在于设置 window.app.AppComponent （我已经有一段时间没有考虑在没有 TS 的情况下这样做了）。因为我找到的示例都是针对像页面这样的一次性组件，所以我阅读它时好像 app.AppComponent 是组件的实例，而不是稍后要实例化的组件类。我想我需要回去做更多的测试。
我会在有机会进行测试后解决我的问题。
我仍然有麻烦，但我确信这是一些愚蠢的事情。我发现了一个较早的问题here，其中有人用 ES5 覆盖了指令。我必须等到明天才能进行更多测试，然后才能将其标记为已回答。令人沮丧的是，我可以在 Typescript 中使用指令，但由于某种原因我的工作不想使用 polyfill！
抱歉耽搁了，我已经很累了。我很确定THIS 是我所追求的文档，但它仍然是一个在制品。一旦我有两个相同的组件，站点就会中断。 directives: [ app.AppOtherComponent ] 似乎不起作用。知道语法是什么吗？干杯。