Angular2 using @Inputs with s

Question

I have a sub-navigation in my page that displays some subviews below a common main view. I would like to pass an object to the subviews through the

Answer 1

We have a big angular project (just starting with Angular, so solutions are as good as our understanding :-) ).

The shell component can call any of the 4 (route-based) "action" modules - where each module has its own service (but no component view) and can call any of the 6 (route-based) shared Components. The shared components are shared between all 4 services, so they cannot have any logic specific to the calling module.

We are using a service resolver ActionModuleServiceResolver which DIs all 4 action services. Based on state (RouterStateSnapshot) URL, we return the appropriate service.

@Injectable()
export class ActionModuleServiceResolver implements Resolve {

  constructor(private _mod1: ModOneService,
    private _mod2: ModTwoService, private _mod3: ModThreeService,private _mod4: ModFourService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): ActionModuleService {
    if(state.url.includes(`/${ActionModuleType.ModOne}/`))
      return this._mod1;
    else if(state.url.includes(`/${ActionModuleType.ModTwo}/`))
      return this._mod2;
....
else
  return null;
  }
}

Each Action Module's Routing module routes to the shared component like this:

    const routes: Routes = [
  {
    path: 'sharedMod1', component: SharedModOneComponent, data: {
      title: `ModOne_SharedModOne`,
      routeName: 'sharedMod1'
    }, resolve: { actionModule: ActionModuleServiceResolver }
  },

Next, each SharedModule gets the activated route via DI and gets the calling service:

//SharedModOne.component.ts
constructor(protected route: ActivatedRoute) {}

  ngOnInit() {
    this.actionModSvc= this.route.snapshot.data['actionModule'];
    this.actionModSvc.getDesignFile(this.route);
  }

Hope this helps someone, also if this can be improved, please let me know.

Thanks,

RDV