Styjun

I try to pass information from one website to another. The two websites do not share the same url or server.

I have the idea that the best way is to use the URL parameters (http://some.url?param=value).
So if I'm not mistaken in the Angular life cycle, before the ngAfterViewInit callback.
By doing this, self.route.snapshot.queryParamMap.get('param') returns me null.

How can I get this param? Is there another (cleaner) way to pass information between 2 angular websites?

Initially my code was in the ngOnInit method. I moved this code to ngAfterContentInit but without any changes, the router remains empty.

I thought about parsing window.location.href, but it doesn't seem clean to me.

app.module.ts

const appRoutes: Routes = [
 path: 'profil', canActivate: [ Guard ], component: ProfilComponent ,
 /* [...] */
 path: '**', canActivate: [Guard], redirectTo: 'profil' ,

];

/* [...] */

@NgModule(
 declarations: [
 ProfilComponent,
 /* [...] */
 ],
 /* [...] */
 imports: [
 RouterModule.forRoot(appRoutes),
 ],
 entryComponents: [],
 bootstrap: [AppComponent]
)
export class AppModule 

app.component.ts

@Component(
 selector: 'app-root',
 templateUrl: './app.component.html',
)
export class AppComponent implements AfterContentInit 

 constructor() 

 ngAfterContentInit() 
 const self = this;
 self.logger.debug(self.route); // empty
 self.logger.debug(self.route.snapshot.queryParamMap.get('param')); // null
 if (self.route.snapshot.queryParamMap.get('param')) 
 localStorage.clear();
 localStorage.setItem('externalParam', self.route.snapshot.queryParamMap.get('param'));
 
 

app.component.ts

@Component(
 selector: 'app-root',
 templateUrl: './app.component.html',
)
export class AppComponent implements AfterContentInit 

 constructor() 

 isAuth(): boolean 
 return !!localStorage.getItem('externalParam');
 

 ngAfterContentInit() 
 const self = this;
 self.logger.debug(self.route); // empty
 self.logger.debug(self.route.snapshot.queryParamMap.get('param')); // null
 if (self.route.snapshot.queryParamMap.get('param')) 
 localStorage.clear();
 localStorage.setItem('externalParam', self.route.snapshot.queryParamMap.get('param'));
 
 

app.component.html

<div id="container" class="h-100">
 <app-nav *ngIf="isAuth()"></app-nav>
 <div id="body" class="h-100">
 <router-outlet></router-outlet>
 </div>
</div>

nav.component.ts

@Component(
 selector: 'app-nav',
 templateUrl: './nav.component.html',
)
export class NavComponent implements OnInit 

 param: any;

 constructor() 

 ngOnInit() 
 this.param = localStorage.getItem('externalParam');
 

The following files are simplified for the example

nav.component.ts

@Component(
 selector: 'app-nav',
 templateUrl: './nav.component.html',
)
export class NavComponent implements OnInit 

 param: any;

 constructor() 

 ngOnInit() 
 this.param = localStorage.getItem('externalParam');
 

nav.component.html

<h1>param</h1>

As mentioned above, for the moment I can't get my parameter from the URL. The Router object is empty.