Угловой компонент в дочернем окне браузера - PullRequest
Новая
       40

Угловой компонент в дочернем окне браузера

0 голосов
/ 06 декабря 2018

Из приложения Angular есть какой-нибудь способ, которым я могу создать дочернее окно браузера и показать в нем некоторый предопределенный угловой компонент.

Уточнение : Я не ищу модальное диалоговое решение.

Ответы [ 6 ]

0 голосов
/ 24 июня 2019

Это то, что я нашел для себя, и делает именно то, что вам нужно.

https://stackblitz.com/edit/angular-open-window

Можно отобразить ваши собственные угловые компоненты в новом дочернем окне, илюбые угловые сервисы также будут внедрены в любой компонент, показанный в дочернем окне.

Он определяет новый WindowComponent, который содержит хост портала.Этот хост портала прикреплен к телу дочернего окна.Это означает, что любые порталы, подключенные к хосту портала, будут отображаться в теле дочернего окна.Хосту портала передаются componentFactoryResolver, applicationRef и injector, предположительно, чтобы он мог инициализировать ваши пользовательские угловые компоненты и внедрить необходимые службы в дочернем окне. 

const host = new DomPortalHost(
    this.externalWindow.document.body,
    this.componentFactoryResolver,
    this.applicationRef,
    this.injector
);

В шаблоне WindowComponent он определяет портал, используя *cdkPortal.Внутри портала он проецирует содержимое компонента окна, как это определено родителем содержимого окна, используя ng-content. 

<ng-container *cdkPortal>
  <ng-content></ng-content>
</ng-container>

Всякий раз, когда создается WindowComponent, он открываетдочернее окно и прикрепите его портал к хосту портала.Когда WindowComponent уничтожено, оно закроет дочернее окно. 

  ngOnInit(){
    // STEP 4: create an external window
    this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');

    // STEP 5: create a PortalHost with the body of the new window document    
    const host = ...

    // STEP 6: Attach the portal
    host.attach(this.portal);
  }

  ngOnDestroy(){
    // STEP 7: close the window when this component destroyed
    this.externalWindow.close()
  }

Это означает, что в компоненте приложения вы можете просто переключать всплывающее окно, используя директиву *ngIf для вашего компонента окна.и вложите любой контент, который вы хотите отобразить в шаблоне. 

<window *ngIf="showPortal">
  <h2>Hello world from another window!!</h2>
  <button (click)="this.showPortal = false">Close me!</button>
</window>

Используя пакет @ angular / cdk, вы также можете изменить этот пример, чтобы создать дочернее окно программно, используя ComponentPortal вместо получения CdkPortal с помощью @ViewChild декоратора.Получив ссылку на хост портала, вы даже можете программно заменить содержимое дочернего окна другим компонентом.При подключении портала к узлу портала вы также можете получить ComponentRef для своего созданного экземпляра компонента, что позволит вам взаимодействовать с ним из кода.

0 голосов
/ 07 февраля 2019

Я попал в этот пост ранее, поэтому, если кто-то все еще пытается визуализировать компонент, динамически загружаемый в разных окнах без запуска нового приложения, я сделал это так: 

    export class ChildLoaderComponent implements OnInit, AfterViewInit {
      constructor(private r: ComponentFactoryResolver, private viewContainerRef: ViewContainerRef) {}
    public windowReference: any;
      ngAfterViewInit() {
        setTimeout(() => {
        //create the component dynamically
        const factory = this.r.resolveComponentFactory(AChildComponent);
        const comp: ComponentRef<AChildComponent> = 
        this.viewContainerRef.createComponent(factory);
        //in case you also need to inject an input to the child, 
        //like the windows reference 
        comp.instance.someInputField = this.windowReference.document.body;
        //add you freshly baked component on the windows
        this.windowReference.document.body.appendChild(comp.location.nativeElement);
      });
    }

    ngOnInit() {
      //create the windows and save the reference       
      this.windowReference = window.open('', '_blank', 'toolbar=0,width=800,height=400');
    }
   }
0 голосов
/ 14 декабря 2018

Вы можете сделать это, используя ссылку с атрибутом target="_blank"

example.component.html 

<a [routerLink]="['/route-to-your-component']" target="_blank">
  Open the component in a new tab
</a>
0 голосов
/ 13 декабря 2018

Создайте ленивый компонент загрузки (как URL) и поместите ваш URL в 

window.open('url', 'window name', 'settings')
0 голосов
/ 13 декабря 2018

Вы можете попробовать дать имена своим различным окнам.Откроется каждое новое окно с указанным именем. 

window.open('url', 'window 1', '');
window.open('url', 'window 2', '');
0 голосов
/ 08 декабря 2018

В случае, если вы используете window.open для дочернего окна, чтобы показать угловой компонент, это окно должно загрузить website, который использует угловой, это означает, что вы легче создадите в своем приложении дочерний маршрут, специально для этой страницы иВы открываете свое собственное приложение для этого конкретного маршрута.Если вы выбрали это решение, знайте о размере вашего приложения, оно будет работать нормально, если вы используете асинхронную маршрутизацию, поэтому при открытии приложения в новом окне вы скачаете angular + other core libs, который вы используете, и + js for that specific route.

Другой вариант заключается в том, что на вашем сервере вы создаете другое угловое приложение, содержащее только этот контент, и у вас есть 2 приложения на одном сервере, обслуживаемые по разным URL-адресам, в этом случае вам необходимо создать новое угловое приложение, которое содержиттолько этот конкретный контент

...