If two different components are in the same view (ngRoute), how can they share a common object or communicate?

Question

In AngularDart I have a view.

https://angulardart.org/tutorial/08-ch06-view.html

'demo_table': ngRoute(
path: '/demo/table',
view: 'views/demotable.html'
),

On the view I have two components.

<component1 view-string="Component 1"></component1>
<component2 view-string="Component 2"></component1>

I would like view-string to be an instance of a string which may be changed by either component1 or component2. The changes should be reflected in the display of the string in the component.

I don't see how to keep a string within this view, as this view is not a component. Usually I would use a "{{someString}}" in the view-string if this view was really a component with a dart object.

Greg Sherman · Accepted Answer · 2015-01-16T14:02:54.880

One way to solve the problem and still use components as opposed to controllers is to introduce a class that contains your shared data. In fact, this also works exactly the same with controllers, but that's a moot point because controllers seem to be going away as Randal mentioned.

(Please pardon any typos or errors - I'm typing right into the text editor, so this may not compile.)

Step 1: Introduce a shared class, annotate it as Injectable:

@Injectable()
class MySharedClass
{
  String mySharedVariable;
}

Step 2: Make sure that that Angular can inject the class by telling Angular about it:

class MyInitModule extends Module {
  MyInitModule() {

    // Your bindings ...
    // Your components, controllers are bound for Angular's DI

    // This is the important part:
    bind(MySharedClass);

    // Typical Angular.Dart bindings:  
    bind(RouteInitializerFn, toValue: yourRouteInitializer);
    bind(NgRoutingUsePushState, toFactory: (_) => 
         new NgRoutingUsePushState.value(false));
}

main() {
  applicationFactory().addModule(new MyInitModule()).run();
}

Step 3: Now add the shared class to your components' constructors. Angular will automatically inject an instance as long as you declare a requirement for it:

@Component(
  selector: 'componentA',
  templateUrl: 'correct_path', // insert correct value here.
  publishAs: 'cmp')
class ComponentA {

  MySharedClass sharedClass;

  ComponentA(this.sharedClass) {
}

@Component(
  selector: 'componentB',
  templateUrl: 'correct_path', // insert correct value here.
  publishAs: 'cmp')
class ComponentB {

  MySharedClass sharedClass;

  ComponentB(this.sharedClass) {
}

And now you have access to your shared class between the two (or more) components as you see fit.

(Modified per Wilson Yeung to add Injectable() annotation)

score 1 · Answer 2 · edited Jun 09 '14 at 06:22

1

The solution I found is to use a controller, in my view I can have {{ctrl.test}} to view the controllers string.

The controller.

library some_library;

import 'package:angular/angular.dart';

@Controller(
    selector: '[some-controller]',
    publishAs: 'ctrl')
class SomeController {
  @NgTwoWay("test")
  String test = "TEST";
}

In the view, add the controller.

<div teacher-controller> etc...

edited Jun 09 '14 at 06:22

Greg Sherman

1,084
1
11
22

answered Jun 07 '14 at 12:11

Phil

46,436
33
110
175

Of course, controllers are deprecated… interesting discussion on the mailing list about that. – Randal Schwartz Jun 07 '14 at 15:52
So what can I do if I cannot use a controller? – Phil Jun 08 '14 at 07:06
Can I have a parent controller in the page which holds onto the data and somehow reference between them?... I'm so confused. – Phil Jun 08 '14 at 07:29

score 1 · Answer 3 · answered Jan 15 '15 at 22:14

1

Greg Sherman's answer using MySharedClass is correct, but is missing the @Injectable() annotation. You'll need something like this:

import 'package:angular/angular.dart';

@Injectable()
class MySharedClass {
  String mySharedVariable;
}

answered Jan 15 '15 at 22:14

Wilson Yeung

101
3

If two different components are in the same view (ngRoute), how can they share a common object or communicate?

3 Answers3

Linked