Ответ 1
Сейчас я пытаюсь сделать нечто похожее (приложение портала с вложенными приложениями в iFrame). Вы можете обмениваться данными между вашим сервером и клиентом (в любом направлении), используя window.postMessage для отправки данных.
Так, например, на сервере приложения:
var iframe = document.getElementById('useriframe');
if (iframe == null) return;
var iWindow = (<HTMLIFrameElement>iframe).contentWindow;
iWindow.postMessage({"for":"user","data":"anything"}, 'http://localhost:4001');
и в клиентском приложении (размещенном в iFrame)
export class AppComponent {
@HostListener('window:message',['$event'])
onMessage(e)
{
if (e.origin!="http://localhost:4200")
{
return false;
}
if (e.data.for=="user")
{
alert('here i am');
}
}
Отображение маршрутов дочерних фреймов в родительском элементе Итак, в моей реализации мы передаем токены и пользовательскую информацию из приложения оболочки в дочерний iFrame и передаем информацию о маршрутизации из дочерних приложений обратно в оболочку, чтобы URL отражал маршрут, выбранный в дочернее приложение. В дочернем приложении у вас может быть маршрут, такой как:
[Userapp]/edituser/имя пользователя
и мы хотим опубликовать его в родительском приложении и отобразить маршрут следующим образом:
Http://МойВебСайт/главная/программа/пользователь # edituser/боб
Обратите внимание, что мы используем хэштег для маркировки дочернего маршрута, а в ваших дочерних приложениях вы перехватываете каждое навигационное событие и публикуете новый маршрут через
export class MyRoutingComponent implements OnInit {
constructor(private router: Router) {
router.events.subscribe((event: Event)=>{
if (event instanceof NavigationEnd){
let url=(<NavigationEnd>event).url;
if (url.length>1)//don't post message about base route '/'
window.parent.postMessage({"for":"dashboard", "operation":"changeroute","route":url},'*')
}
})
}
а затем в родительском приложении проанализируйте сообщение и используйте его для обновления отображаемого пути к местоположению.
url = url +'#' + route;
this.location.go(url);