angular 2.0中的组件可重用性_Angular

angular 2.0中的组件可重用性

angular

angular 2.0中的组件可重用性,angular,Angular,我刚刚开始学习angular 2.0，在构建组件后，我会很困惑如何重用该组件。我开始学习quickstart示例，并且运行良好。但当我再次使用该组件时，它就不起作用了。这是我的密码： <html> <head> <title>Angular 2 QuickStart</title> <script src="https://code.angularjs.org/tools/system.js"></script&g

我刚刚开始学习angular 2.0，在构建组件后，我会很困惑如何重用该组件。我开始学习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>


角度2快速入门
System.config({
transpiler:'typescript'，
typescriptOptions:{emitDecoratorMetadata:true}
});
系统导入（'app.ts'）；
加载。。。
加载。。。

这是我的app.ts文件：

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

从'angular2/angular2'导入{Component，bootstrap}；
@组成部分({
选择器：“我的应用程序”，
模板：“{{username}}”
})
类AppComponent{
公共用户名=“某物”；
}
bootstrap（AppComponent）；

输出结果显示：

某物
加载

第二个怎么了！！！。

提前感谢您告诉我这是如何工作的以及我将如何工作。

您的应用程序组件是应用程序根组件。在根组件中，可以有可重用的组件。我创建了一个简单的示例：（）：

应用程序组件包含两个简单组件：

<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";
}

从'angular2/angular2'导入{Component}；
@组成部分({
选择器：“简单”，
模板：“{{username}}”
})
导出类SimpleComponent{
公共用户名=“某物”；
}

组件的概念在Viktor Savkin的帖子中有很好的描述：

非常非常感谢rerezz。使用2.0对我当前的项目很有帮助