创建单独的组件Angular 2答案

【问题标题】：Creating Separate Components Angular 2创建单独的组件Angular 2
【发布时间】：2016-03-14 15:31:18
【问题描述】：

我正在尝试在 Angular 2 中创建两个单独的组件，它们之间没有任何关系，因此它们没有嵌套。一个组件是Users，另一个是Clients。

我所做的是分别调用它们，使用main.ts 作为主入口点，在那里引导两个组件，然后在index.html 中调用它们。

我的问题是：

1- 我是否可以不依赖主入口点并直接从index.html 调用它们，就像角度 1 或角度 2 中的指令一样，您必须依赖主入口组件？

2- 有更好的方法来引导多个控制器吗？

这里是plunkr： http://plnkr.co/edit/fm70cmcWOSFrEKyRx4GF

我的 config.js

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

我的clients.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
  directives: []
})
export class Clients {
  constructor() {
    this.name = 'Angular2'
  }
}

我的users.ts

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
  selector: 'users',
  providers: [],
  template: `
    <div>
      <h2>Hello second component</h2>

    </div>
  `,
  directives: []
})
export class Users {
  constructor() {
    this.name = 'Angular2'
  }
}

我的main.ts

//main entry point
import {bootstrap} from 'angular2/platform/browser';
import {Clients} from './clients';
import {Users} from './users';


bootstrap(Clients, [])
  .catch(err => console.error(err));

bootstrap(Users, [])
  .catch(err => console.error(err));

我的index.html

<!DOCTYPE html>
<html>

<head>
  <title>angular2 playground</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script>
  <script src="https://code.angularjs.org/tools/system.js"></script>
  <script src="https://code.angularjs.org/tools/typescript.js"></script>
  <script src="config.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/Rx.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/angular2.dev.js"></script>
  <script src="https://code.angularjs.org/2.0.0-beta.8/http.dev.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
</head>

<body>
  <my-app>
    loading...
  </my-app>
  <users></users>
</body>

</html>

【问题讨论】：

看看这篇文章：stackoverflow.com/questions/34818238/…

标签： javascript angularjs angular

【解决方案1】：

实际上，您可以将多个组件引导到您的 HTML 入口文件中，但它们将对应于具有单独注入器的两个不同应用程序，即您不能使用依赖注入中另一个应用程序的元素。

您会注意到，有一种解决方法是基于提供者使用 useValue 并在两个应用程序之外显式创建其实例。

每个应用程序都需要有一个主要组件。该组件将用于引导该应用程序。该组件的选择器将用于在 HTML 入口文件中附加应用程序。

请注意，您可以引导多个组件，但不能两次引导同一个组件。

【讨论】：

所以最好的方法是使用一个主文件来引导我的基本组件（其他组件的容器）。