首页 文章

在angular2 non SPA中加载两个组件

提问于
浏览
1

鉴于以下组件 . 我想在非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.

2 回答

  • 0

    尝试此操作的其他人的答案是创建两个模块,并且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 {}
    
  • 1

    似乎你缺少一个模块定义,例如:

    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);
    

相关问题