Angular2 Router Communication

Question

Either I do not get the template, or my design is wrong.

Using angular2 -beta0, typescript

Basically, I created a very basic application with a root component - a router that controls the main views, and then on some pages I have an auxiliary router for managing the views on this component.

What I seem to be struggling with is how to structure things with communication between components. The application, as at the moment, is designed in such a way that it makes sense to me, the main types of routes have nothing in common, and in the subroutine representations they all have the same navigation and headers. It seems that the problem is with the presentation of the parent subview view. It seems that the child is in the router-output, he can not get dependent on the parent component. I looked at custom events, but they seem to work if attached to a template. The only other option seems to be a service, but to me it seems violated. Ideally, I want the parent component to monitor the state of the subcomponents.

Anyone like some example code ...

@Component({ selector: 'app' }) @View({ template: '<router-outlet></router-outlet>', directives: [ROUTER_DIRECTIVES] }) @RouteConfig([ { path: '/', as: 'Login', component: LoginForm }, { path: '/main/...', as: 'Main', component: Main} ]) class App { constructor(private _router: Router) { } } bootstrap(App, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, { useValue: '/' })]); @Component({ selector: 'main' }) @View({ templateUrl: '/client/main/main.html', directives: [ROUTER_DIRECTIVES, NgClass, Menu, Main] }) @RouteConfig([ { path: '/', as: 'Clear', component: StateClear }, { path: '/offer', as: 'Offer', component: StateOffer } ]) export class Main { constructor(private _router: Router) { } } @Component({ selector: 'state-clear' }) @View({ templateUrl: '/client/bookings/state-clear.html' }) export class StateClear { constructor(main: Main) { } } 

The error I get with DI is ...

EXCEPTION: Unable to resolve all parameters for StateClear (undefined). Make sure they all have valid type or annotations.

Error with the event, because I do not see how to listen outside the template.

Answer 1

So what can you do instead of using DI with parent components.

How are you doing here:

 export class StateClear { constructor(main: Main) { } } 

You might just want to create a service that processes the data you want to use at the route / component level.

 @Injectable() export class UserSettingsService { // Application wide settings/config should be instatiated here // with a call from OnInit we can set all of these values. constructor() { } public iId: number; public userName: string; public isLoggedIn: boolean; public firstName: string; public lastName: string; public permissions: string[]; getUser(userName:string) { // with an AJAX request get user Auth. return Promise.resolve(api.getUserAuth(userName)); } } 

Now this UserSettingsService can be added to your boot block as an application-level service, and then it can be transferred to all the routes you want to share with. dependency-injection-in-angular-2

 bootstrap(App, [ROUTER_PROVIDERS, UserSettingsService, provide(APP_BASE_HREF, { useValue: '/' })]); 

Then you get the following to access this data in your component.

 @Component({ selector: 'state-clear' }) @View({ templateUrl: '/client/bookings/state-clear.html' }) export class StateClear { userName:string; userId:int; isLoggedIn:boolean; constructor(private _userSettings: UserSettingsService) { // Not that you would do this here again but just for an example that the data is retrievable here. this.userName = this._userSettings.userName; this.userId = this._userSettings.iId; } }