angular 2.0 中的组件可重用性

Question

我刚刚开始学习 angular 2.0，并且在构建后对重用组件感到困惑。我开始从 https://angular.io/guide/quickstart 学习快速入门示例并且运行良好。但是当我再次使用该组件时，它不起作用。这是我的代码：

<html>
<head>
    <title>Angular 2 QuickStart</title>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true }
      });
      System.import('app.ts');
    </script>
</head>
<body>
    <my-app>loading...</my-app>
    <my-app>loading...</my-app>
</body>
</html>

这是我的 app.ts 文件：

import {Component, bootstrap} from 'angular2/angular2';
@Component({
    selector: 'my-app',
    template: '<h1>{{username}}</h1>'
})
class AppComponent {
    public username = "something";
}
bootstrap(AppComponent);

并且输出显示：

某事
加载中...

第二个怎么了！！！预先感谢您让我清楚这是如何工作的以及我将如何解决。

Answer 1

您的 AppComponent 是应用程序的根组件。在根组件中，您可以拥有可重用的组件。我创建了一个简单的示例：(http://plnkr.co/edit/02D8RI?p=preview):

Application 组件包含两个简单的组件：

<div>
  <h2>Hello Angular2!</h2>
  <simple></simple>
  <simple></simple>
</div>

简单组件：

import { Component } from 'angular2/angular2';
@Component({
   selector: 'simple',
   template: '<h1>{{username}}</h1>'
})
export class SimpleComponent {
  public username = "something";
}

Viktor Savkin 的 post 中详细描述了组件的概念：http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2

angular 2.0 中的组件可重用性

component reusability in angular 2.0

angular