Follow up:
I created an a component that will be called (instantiated?) by the
angular2 router mechanism. Then I created a service based on Stream using
the pattern described in www.syntaxsuccess.com. In the ngOnInit of that
component, I used that Stream to emit an object. In this case I had
created a MessageVO object to emit. In my app.component.ts, which is in
essence the 'Router' you describe in your diagram, I subsribe to that
message Stream. Now, whenever the component is instantiated via the
router, ngOnInit is called, and the Router (AppComponent) reacts to that
event. Wow! How cool is that!
--------------------------
MessageEmitter.ts------------------------------------
import {Subject } from 'rxjs/Subject';
import {MessageVO} from '../vo/MessageVO';
export class MessageEmitter extends Subject<MessageVO>{
constructor() {
super();
}
emit(value:MessageVO) {
console.log('>>> emit messageVO from MessageEmitter');
console.log(value);
super.next(value);
}
}
-------------------------- MessageService.ts------------------------------------
import {MessageEmitter} from '../emitters/MessageEmitter';
export class MessageService{
Stream:MessageEmitter;
constructor(){
this.Stream = new MessageEmitter();
}
}
-------------------------- HomeComponent.ts------------------------------------
import {Component} from 'angular2/core';
import {MessageVO} from '../vo/MessageVO';
import {MessageService} from '../common/messageService';
@Component({
selector: 'home',
templateUrl: 'app/home/home.component.html'
})
export class HomeComponent {
title: string = 'Home Page';
body: string = 'This is the about home body';
message: string;
constructor(private messageService:MessageService) { }
ngOnInit() {
this.sendMessage();
}
sendMessage(){
var messageVO:MessageVO = new MessageVO();
messageVO.subject = 'message from the robot overlord';
messageVO.content = 'you must all obey!';
messageVO.date = 'January 15, 2016';
messageVO.isRead = false;
this.messageService.Stream.emit(messageVO);
}
}
-------------------------- app.component.ts------------------------------------
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomeComponent} from './home/home.component';
import {MessageService} from './common/message.service';
import {MessageVO} from './vo/MessageVO';
@Component({
selector: 'app',
templateUrl: 'app/app.component.html',
directives: [ ROUTER_DIRECTIVES ],
providers: [MessageService]
})
@RouteConfig([
{path:'/home', name: 'Home', component:HomeComponent, useAsDefault:true}
])
export class AppComponent {
constructor(private messageService:MessageService){
messageService.Stream.subscribe(message => this.processMessage(message));
}
processMessage(messageVO:MessageVO){
console.log(' >>>>>> messageVO from app.component.ts');
console.log(messageVO);
}
}
I assume you know how to put the views together, so I didn't include that part.
I will create a plunker. I know that they really don't want us filling the
posts full of code.
On Friday, January 15, 2016 at 3:31:30 AM UTC-5, Alfred Feldmeyer wrote:
>
> Hey together,
>
> I have following situation:
>
>
> <https://lh3.googleusercontent.com/-jJsbqhMxjGU/Vpg6SPuqEmI/AAAAAAAAEBY/VtWqDSBGdy0/s1600/Zeichnung1.png>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> *I simply want to give a string into the Router from the active child
> component.*
>
> I was looking for an event bubbeling solution, where e.g. ComponentA emits
> an event in a OnInit hook method and AppComponent is listening for it.
>
> Also I tried to access the active component through the Router and the
> Location object.
>
> I am stuck!
>
> The only way I found was:
> http://plnkr.co/edit/0hrHdO14sHy3LNVWpuiZ?p=preview
> But it looks not like the intended way.
>
> Could somebody please help me. Any help/link is welcome.
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
