如何在一頁中渲染多個angular2組件？

Question

我正在這個項目中工作，我必須在一個頁面中加載多個組件。 我的目錄結構是這樣的：

我以前在angular2中創建了幾個組件。 如果更改main.ts的組件，則可以一一呈現所有組件。以下是main.ts 1.main.ts的內容

import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';
import {Component1} from './Component1/Component1.component'
import {Component2} from './Component2/Component2.component'
import {Component3} from './Component3/Component3.component'
import {Component4} from './Component4/Component4.component'
import {Component5} from './Component5/Component5.component'

bootstrap(Component5,[
  HTTP_PROVIDERS,
]);

2.index.html

 <html> <head> <title>Angular 2 TypeScript App</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content="iCETS"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="node_modules\\bootstrap\\dist\\css\\bootstrap.min.css" rel="stylesheet" /> <!-- 1. Load libraries --> <!-- IE required polyfills, in this exact order --> <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/systemjs/dist/system-polyfills.js"></script> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <script src="node_modules/angular2/bundles/http.dev.js"></script> <!-- 2. Configure SystemJS --> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main') .then(null, console.error.bind(console)); </script> </head> <!-- 3. Display the application --> <body> <component_5>Loading...</component_5> //it works //what i want to achieve <component_1>Loading...</component_1> <component_2>Loading...</component_2> <component_3>Loading...</component_3> <component_4>Loading...</component_4> </body> </html>

有什么辦法可以在一頁中呈現所有這些組件？

Answer 1

為此，您需要引導每個組件，如下所述：

import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';
import {Component1} from './Component1/Component1.component'
import {Component2} from './Component2/Component2.component'
import {Component3} from './Component3/Component3.component'
import {Component4} from './Component4/Component4.component'
import {Component5} from './Component5/Component5.component'

bootstrap(Component1,[ ... ]);
(...)
bootstrap(Component5,[
  HTTP_PROVIDERS,
]);

請參見以下鏈接： https : //angular.io/docs/ts/latest/api/platform/browser/bootstrap-function.html ，“引導多個應用程序”部分。

如何在一頁中渲染多個angular2組件？

問題描述

1 個解決方案

解決方案1
2 已采納 2016-02-09 12:39:07

如何在一頁中渲染多個angular2組件？

問題描述

1 個解決方案

解決方案1 2 已采納 2016-02-09 12:39:07

解決方案1
2 已采納 2016-02-09 12:39:07