如何使用Angular 2进行长形引导? [英] How to do a longform bootstrap with Angular 2?

问题描述

我最近遇到了一篇文章，其中有人希望将Drupal作为后端服务自由使用组件(Angular 2).

I've recently came across an article where someone wanted to use components freely (Angular 2) with Drupal as a backend service.

您可以在此处查看文章:

You can check out the article here: http://www.mediacurrent.com/blog/building-wundergroundcom-drupal-angular-2-challenge-1-how-bootstrap

Matt，在这里提到了如何完成这项工作，并向我们展示了一个Plunkr示例，但是看起来它不再适用于新的Angular 2 RC1版本.

Matt, mentions here how to get this done and shows us a Plunkr example, however it looks like that it's no longer working with the new Angular 2 RC1 version.

有人可以更新此Plunkr以使其与当前版本一起使用吗?我知道平台和引导程序已被删除/放置在其他地方，这就是它不起作用的原因.

Can someone please update this Plunkr to work with the current version? I know that platform and bootstrap has been removed/placed to somewhere else and I think that's the reason it's not working.

这是一个小例子:

http://plnkr.co/edit/A7fyFUST9IdP1FriauXk?p=preview

以下是我认为可能需要更改的代码:

And here is the code that might need to be changed in my opinion:

//main entry point
import {platform} from 'angular2/core';
import {bootstrap, BROWSER_PROVIDERS, BROWSER_APP_PROVIDERS} from 'angular2/platform/browser';
import {Comp1} from './comp1';
import {Comp2} from './comp2';

var app = platform(BROWSER_PROVIDERS).application([BROWSER_APP_PROVIDERS]);

// These are just loaded manually, but could be put inside an isInViewport
// function for lazyloading.
app.bootstrap(Comp1);
app.bootstrap(Comp2);

bootstrap({Comp1, Comp2}, [])
  .catch(err => console.error(err));

如果有人可以在这里提供可行的解决方案，我将不胜感激.

I would really appreciate if someone could offer a viable solution here.

推荐答案

现在实际上更容易做到这一点:

Now is actually easier to do that:

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

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

bootstrap(AppComponent);
bootstrap(AppTwoComponent);

工作示例-> http://plnkr.co/edit/sRMyTMYK8ba3NS2eQorR

但是您可能需要能够在应用程序之间进行通信: http://plnkr.co/edit/aZqdJe3OZ8K2odHioWkB

But you will probably need to be able to communicate between applications: http://plnkr.co/edit/aZqdJe3OZ8K2odHioWkB

var shared = new SharedService();//this way we share same instance

bootstrap(AppComponent, [{ provide: SharedService, useValue: shared }]);
bootstrap(App2Component, [{ provide: SharedService, useValue: shared }]);

，您可以根据以下条件实现共享服务: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

and you can implement shared service according to: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

import { Injectable } from '@angular/core';
import { Http, Response} from '@angular/http';
import { Observable, Subject } from 'rxjs/Rx';

@Injectable()
export class SharedService {
  constructor() {
    console.log('shared service init');
  }
  // Observable string source
  private missionConfirmedSource = new Subject<string>();

  // Observable string stream
  missionConfirmed$ = this.missionConfirmedSource.asObservable();

  confirmMission(astronaut: string) {
    console.log(astronaut);
    this.missionConfirmedSource.next(astronaut);
  }
}

像这样发布:

this._sharedService.confirmMission('some string');

订阅看起来像这样:

_sharedService.missionConfirmed$.subscribe(
        hero => {
            console.log('confirmed');
            alert('App2Component received hero click: ' + hero);
        });

这篇关于如何使用Angular 2进行长形引导?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！