Question

考虑以下组件。我想在非SPA网站上使用这些组件，就像plunker here一样。此示例不再有效，因为角度2的最新测试版使用模块，不再定义引导程序，并且我无法使这两个组件并行工作。

//我们的第一个组件。

import {Component} from 'angular2/core'

@Component({
  selector: 'comp1',
  providers: [],
  template: `
    <div>
      <h3>Hello, {{name}}</h3>

    </div>
  `,
  directives: []
})
export class Comp1 {
  constructor() {
    this.name = 'I am ng2 component 1'
  }
}

//我们的第二个组成部分。

import {Component} from 'angular2/core'

@Component({
  selector: 'comp2',
  providers: [],
  template: `
    <div>
      <h3>Hello, {{name}}</h3>

    </div>
  `,
  directives: []
})
export class Comp2 {
  constructor() {
    this.name = 'I am ng2 component 2'
  }
}

有一个plunker here，使用角度测试版。如何使用最新版本的角度2注册这两个组件。对于较新的角度版本，样本不再有效。

当我尝试导入bootstrap时，较新版本的angular的结构不同。

import {platform} from '@angular/core';
// platform is undefined.
import { bootstrap, BROWSER_PROVIDERS, BROWSER_APP_PROVIDERS } from '@angular/platform-browser';
// bootstrap is undefined, BROWSER_PROVIDERS is undefined etc.

Answer 1

尝试此操作的其他人的答案是创建两个模块，register each module separately

注册

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModuleA, AppModuleB} from './app';

platformBrowserDynamic().bootstrapModule(AppModuleA);
platformBrowserDynamic().bootstrapModule(AppModuleB);

模块

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppA ],
  bootstrap: [ AppA ]
})
export class AppModuleA {}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppB ],
  bootstrap: [ AppB ]
})
export class AppModuleB {}

Answer 2

似乎你错过了一个模块定义，例如：

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import {Comp1} from './comp1';
import {Comp2} from './comp2';

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        Comp1,
        Comp2
    ],
    bootstrap: [Comp1]
})

export class AppModule { }

<强> main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

在angular2 non SPA中加载两个组件

2 个答案: