Angular在启动页index.html多次重复使用组件的方法

默认情况下,在angular的index.html只能使用一个根标签作为应用的入口,如:

<!DOCTYPE html>
<html>
 <head>
  <base href="." />
 </head> 
 <body>
   <app-root></app-root>
 </body>
</html>

如果要在index.html页面多次使用组件,可以在模块的ngDoBootstrap()方法里添加:

app.ts

根组件app.ts定义组件,组件选择器为"my-app"

import { Component, NgModule, Inject, OpaqueToken } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'

import { ApplicationRef, ComponentFactory, ComponentFactoryResolver, Type } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
  <div>
   <h2>Hello {{name}}</h2>
  </div>
 `,
})
export class App {
 name:string;
 constructor() {
  this.name = 'Angular'
 }
}

export const BOOTSTRAP_COMPONENTS_TOKEN = new OpaqueToken('bootstrap_components');

@NgModule({
 imports: [ BrowserModule ],
 declarations: [ App ],
 entryComponents: [ App ]
})
export class AppModule {
  constructor(
    private resolver : ComponentFactoryResolver
    @Inject(BOOTSTRAP_COMPONENTS_TOKEN) private components
  ) {}

  ngDoBootstrap(appRef : ApplicationRef) {
    this.components.forEach((componentDef : {type: Type<any>, selector: string}) => {
     const factory = this.resolver.resolveComponentFactory(componentDef.type);
     factory.selector = componentDef.selector;
     appRef.bootstrap(factory);
    });
  }
}

在AppModule的构造函数里注入在index.html使用的组件components,它在main.ts里声明注册。

核心代码在ngDoBootstrap():

ngDoBootstrap(appRef : ApplicationRef) {
    this.components.forEach((componentDef : {type: Type<any>, selector: string}) => {
     const factory = this.resolver.resolveComponentFactory(componentDef.type);
     factory.selector = componentDef.selector;
     appRef.bootstrap(factory);
    });
  }

main.ts

angular 应用入口

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule, App, BOOTSTRAP_COMPONENTS_TOKEN} from './app';

const components = [
 { type: App, selector: "my-app#app-1" },
 { type: App, selector: "my-app#app-2" }
];

const platform = platformBrowserDynamic([
 {provide: BOOTSTRAP_COMPONENTS_TOKEN, useValue: components}
]);
platform.bootstrapModule(AppModule);

在入口的main.ts定义了在index.html跟页面使用的组件列表components,并且使用paltformBorwserDynamic()注册。

index.html

在index.html使用如下:

<!DOCTYPE html>
<html>

 <head>
  <base href="." />
  <title>angular2 playground</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
  <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
  <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
  <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
  <script src="config.js"></script>
  <script>
  System.import('app').catch(console.error.bind(console));
 </script>
 </head>

 <body>
  <my-app id="app-1">loading 1...</my-app>
  <my-app id="app-2">loading 2...</my-app>
 </body>

</html>

版权声明:著作权归作者所有。

相关推荐

JavaScript删除数组里重复的元素

JavaScript里有多种方法可以用来对数组元素去重。ES6 SetES6提供了一个Set对象,用它可以很简单便可以对数组元素去重。function uniq(arr) {    return Array.from(new Set(arr)); } filter另外也可以通过filter来对数组元素去重。functi

Angular入口组件(entry component)和声明式组件的区别

Angular的声明式组件和入口组件的区别体现在两者的加载方式不同。声明式组件是通过组件声明的selector加载入口组件(entry component)是通过组件的类型动态加载声明式组件声明式组件会在模板里通过组件声明的selector加载组件。示例@Component({   selector: 'a-cmp',   templat

Angular 4选择组件模板DOM元素(DOM操作)的方式

Angular提供了多种方式让我们获取页面的元素。主要分为两种:基于Decorator:@ViewChild,@ViewChildren,@ContentChild,@ContentChildren使用ElementRef以及querySelectorDecorator:@ViewChild,@ViewChildren,@ContentChild,@ContentChildren@ViewChil

Angular CLI在Angular项目里使用scss

Angular CLI支持多种css预处理,包括:cssscsslesssassstyl (stylus)默认值为css。Angular有两种方式指定css预处理。下面以scss为例:新建项目指定css预处理在新建angular项目是使用--style指定css预处理ng new my-project --style=scss 已有项目指定css预