I haven't played with router much myself but from what I have seen binding
can't be used with components added by the router.
Instead of
simpleservice.parent_service = this;
I'd prefer to add an EventEmitter to the service and subscribe to it
simpleservice.someEmitter.subscribe(value => {
this.someMethod();
})
and in the other component to invoke `someMethod()`
simpleservice.someEmitter.next(someValue);
to avoid to tight coupling between components, for example to not make
testing too hard.
On Saturday, January 30, 2016 at 1:12:09 AM UTC+1, Chris Derossi wrote:
>
> Thanks for the pointer.
>
> From what I understand (and I'm just learning), it's not possible to use
> simple binding between a parent and a child inserted by the router. My view
> only contains <router-outlet> and any one of several components may occupy
> it as the user navigates around.
>
> What I wound up doing was creating a tiny service shared by all relevant
> components and all it does is allow them to find each other. The service
> just has a public property parent_service and my parent component's
> constructor just does:
>
> _simpleservice.parent_service = this;
>
> And my child components just do:
>
> _simpleservice.parent_service.someMethod();
>
> It was very simple to code this up, but seems like a roundabout way to
> discover the parent/child relationships as the router changes them.
>
> On Tuesday, January 26, 2016 at 4:15:01 AM UTC-8, Günter Zöchbauer wrote:
>>
>> Communication between parent and child work well with just binding.
>> Otherwise use a shared service
>> See
>> http://stackoverflow.com/questions/34700438/global-events-in-angular-2
>> for an example
>>
>> On Monday, January 25, 2016 at 3:11:09 AM UTC+1, Chris Derossi wrote:
>>>
>>> I want to be able to communicate (i.e. call methods) between a component
>>> instance and one of its child component instances. Or just as good for me,
>>> call from one component instance to the parent component instance.
>>>
>>> For example, take this pseudo setup:
>>>
>>> @Component({
>>> selector: 'outerC',
>>> template: `
>>> <div>stuff</div>
>>> <router-outlet></router-outlet>
>>> `,
>>> directives: [ROUTER_DIRECTIVES]
>>> })
>>> @RouteConfig([
>>> {path:'/', name: 'ItemList', component: ItemListComponent,
>>> useAsDefault: true},
>>> {path:'/:id', name: 'ItemDetail', component: ItemDetailComponent
>>> },
>>> ])
>>> export class OuterComponent
>>> {
>>> constructor( ) { }
>>> }
>>>
>>> @Component({
>>> selector: 'item-list',
>>> template: `<div>stuff</div>`
>>> })
>>> export class ItemListComponent
>>> {
>>> constructor( ) { }
>>> something() { return x; }
>>> }
>>>
>>> @Component({
>>> selector: 'item-detail',
>>> template: `<div>stuff</div>`
>>> })
>>> export class ItemDetailComponent
>>> {
>>> constructor( ) { }
>>> something() { return x; }
>>> }
>>>
>>> I'd like the code in OuterComponent to be able to call the something()
>>> method on whichever component instance that the router inserts at the
>>> router-outlet location. Or, conversely and more generally, I'd like code in
>>> ItemListComponent or ItemDetailComponent to be able to call methods on the
>>> OuterComponent instance that is hosting them.
>>>
>>> Is there a "right" way for these instances to get references to each
>>> other? It doesn't look like there's an interface on Router to let
>>> OuterComponent find out what the Router has inserted at the router-outlet.
>>>
>>> I've looked at the ViewQuery stuff and I can sorta make it work. But it
>>> requires that I code specifically for the class names that I'm looking for.
>>> As my RouteConfig evolves and gets lengthy, I dislike the idea that I'd
>>> have to manually keep a parallel list of the possible components in my
>>> Query.
>>>
>>> Any ideas, or feedback about why I'm looking at this the wrong way?
>>>
>>> Thanks!
>>>
>>>
--
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.
