在angular2 non SPA中加载两个组件

问题描述

给出以下组件.我想在非SPA网站上使用这些组件，就像此处的监听器一样.该示例不再有效，因为angular 2的最新beta版使用模块，不再定义引导程序，因此我无法使这两个组件并行工作.

Given the following components.I want to use these components on a non SPA web site exactly like the plunker here. This sample is no longer valid, as the latest beta of angular 2 uses modules, bootstrap is no longer defined, and I cannot get the two components to work in parallel.

//我们的第一个组件.

// Our first component.

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'
  }
}

//我们的第二个组件.

// Our second component.

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'
  }
}

有一个朋克车，使用的是beta版本的angular.如何使用最新版本的angular 2注册这两个组件.该示例不再适用于新的angular版本.

There is a plunker here, using a beta version of angular.How do I register these two components using the latest version of angular 2. The sample is not longer valid for the newer angular versions.

当我尝试导入引导程序时，Angular的较新版本的结构有所不同.

When I attempt to import bootstrap, the newer versions of angular are structured differently.

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.

推荐答案

尝试进行此操作的其他人的答案是创建两个模块，然后分别注册每个模块

The answer to anyone else attempting this, is to create two modules, and 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 {}

这篇关于在angular2 non SPA中加载两个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！