自举 Angular 2

Question

我一直在看一些关于 Angular 的教程。 2. 我对引导组件感到困惑。如果我想创建多个页面应用程序，并且不需要那个根组件，我该怎么做呢？我了解它如何适用于单页应用程序。

这是我的 Main.Ts 文件。

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

import { AppComponent } from './app.component';

bootstrap(AppComponent);

这是我的 app.component.ts 文件。

import {Component} from 'angular2/core'; 

@Component({
    selector: 'pm-app',
    template: '<h1>{{PageTitle}}</h1>'
})
export class AppComponent {
    PageTitle: string = "Test";  

}

如果我想导航到 index.html 以外的页面，并让它加载不同的组件而不引入 AppComponent，我该怎么做呢？在 Angular 1+ 中，这很容易，因为我只是在 HTML 页面上引用了我想使用的控制器。我如何才能在不同的页面上引用我想使用的组件？

谢谢。试图绕过 angular 2.

Answer 1

某些组件必须始终是该根组件。

没有必要总是同一个组件。您还可以 bootstrap 在一个页面上使用多个组件，但是每个 Angular2 应用程序都从某个元素开始，这是使用

初始化的根组件

@NgModel({
  ...
  bootstrap: [AppComponent]
})

该元素的视图可以包含构成整个应用程序的其他元素和指令。

Answer 2

Angular 2 非常擅长加载组件，这就是为什么它比 angular 1 快 5 倍。它不会一次加载所有组件它会加载所需的组件只是作为Lazy Loading的概念。动态加载使用了Systemjs的特性，也可以使用Webpack

Angular 2 在设计上是模块化的，因此如果您的应用程序有很多模块。您可以创建多个模块并将所有模块绑定到单个根模块。

然后就可以使用angular2路由功能了。根据用户点击的路线加载所需的模块。

你可以从这里深入学习路由

https://angular.io/docs/ts/latest/guide/router.html

自举 Angular 2

Bootstrapping Angular 2

bootstrapping

angular