Question

我最近遇到过一篇文章，其中有人希望将自由组件（Angular 2）与Drupal一起用作后端服务。

您可以在此处查看文章：http://www.mediacurrent.com/blog/building-wundergroundcom-drupal-angular-2-challenge-1-how-bootstrap

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

有人可以更新此Plunkr以使用当前版本吗？我知道平台和引导程序已被删除/放置到其他地方，我认为这是它无法正常工作的原因。

以下是plunker示例：

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

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

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

如果有人能在这里提供可行的解决方案，我真的很感激。

Answer 1

现在实际上更容易做到：

document.getElementsByTagName("form")  // it returns an array of elements

工作示例 - ＆gt; http://plnkr.co/edit/sRMyTMYK8ba3NS2eQorR

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

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

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

bootstrap(AppComponent);
bootstrap(AppTwoComponent);

您可以根据以下内容实施共享服务： https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

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

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

像这样发布：

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

如何使用Angular 2进行longform引导？

1 个答案: