Я пытаюсь передать информацию с одного сайта на другой. Два веб-сайта не используют один и тот же URL-адрес или сервер.
У меня есть идея, что лучше всего использовать параметры URL (http://some.url?param=значение). Итак, если я не ошибаюсь в жизненном цикле Angular, до обратного вызова ngAfterViewInit. Делая это, self.route.snapshot.queryParamMap.get('param') возвращает мне ноль.
Как я могу получить этот параметр? Есть ли другой (более чистый) способ передачи информации между двумя угловыми веб-сайтами?
Изначально мой код был в методе ngOnInit. Я переместил этот код в ngAfterContentInit, но без каких-либо изменений маршрутизатор остается пустым.
Я думал о разборе window.location.href, но мне это не кажется чистым.
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');
}
}
Следующие файлы упрощены для примера
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>
Как упоминалось выше, на данный момент я не могу получить свой параметр из URL-адреса. Объект маршрутизатора пуст.
На самом деле параметр, который я передаю из одного приложения в другое, представляет собой одноразовый код, предоставляющий информацию о текущем пользователе. Мы можем видеть это как SSO. Я хочу сохранить эту информацию с одного сайта на другой, чтобы пользователю не приходилось повторно подключаться к каждой навигации.






Почему вы не можете напрямую отправлять HTTP-запросы с одного сервера на другой? Приложения Angular работают во внешнем интерфейсе и не могут взаимодействовать друг с другом.