Wie funktioniert ein Longform Bootstrap mit Angular 2?

Question

Ich bin kürzlich auf einen Artikel gestoßen, in dem jemand Komponenten frei (Angular 2) mit Drupal als Backend-Dienst verwenden wollte.

Sie können hier den Artikel finden Sie unter: http://www.mediacurrent.com/blog/building-wundergroundcom-drupal-angular-2-challenge-1-how-bootstrap

Matt, hier erwähnt, wie dies uns ein Beispiel Plunkr getan und zeigt, aber es sieht aus wie, dass es nicht mehr mit der neuen Schräg 2 RC1-Version zu arbeiten.

Kann jemand bitte diesen Plunkr aktualisieren, um mit der aktuellen Version zu arbeiten? Ich weiß, dass Plattform und Bootstrap entfernt/woanders platziert wurden und ich denke, das ist der Grund, warum es nicht funktioniert. Hier

ist das Plunker Beispiel:

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

Und hier ist der Code, der meiner Meinung nach geändert könnte sein müssen:

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

Ich hätte gerne wirklich, wenn jemand ein anbieten könnte praktikable Lösung hier.

Answer 1

Jetzt ist tatsächlich einfacher, das zu tun:

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

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

bootstrap(AppComponent); 
bootstrap(AppTwoComponent); 

Arbeitsbeispiel ->http://plnkr.co/edit/sRMyTMYK8ba3NS2eQorR

Aber Sie müssen wahrscheinlich zwischen Anwendungen kommunizieren können: 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 }]); 

und Sie können den gemeinsam genutzten Dienst folgendermaßen implementieren: 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); 
    } 
} 

wie folgt veröffentlichen:

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

zeichn wie folgt aussehen:

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