web-dev-qa-db-ja.com

Angularブラウザの子ウィンドウのコンポーネント

Angularアプリケーションから、ブラウザの子ウィンドウを作成し、その中に事前定義されたangularコンポーネントを表示する方法があります。

明確化：モーダルダイアログソリューションを探していません。

angularbrowsercomponentsangular6childwindow
14
Shrikey

angularコンポーネントを表示するために子ウィンドウにwindow.openを使用している場合、そのウィンドウはangularを使用するwebsiteをロードする必要があります。独自のアプリでそのページ専用の子ルートを作成し、その特定のルートへの独自のアプリを開きます。このソリューションを選択した場合、アプリのサイズに注意してください。非同期ルーティングを使用すると、このソリューションは正常に動作します。新しいウィンドウでアプリを開くと、angular + other core libsがダウンロードされますおよび+ js for that specific routeを使用します。

別のオプションは、サーバーでそのコンテンツのみで別のangularアプリを作成し、同じサーバー上に異なるURLで提供される2つのアプリがある場合、新しいangularを作成する必要があることです_特定のコンテンツのみを含むアプリ

4
Nicu

以前にこの投稿に行きましたので、誰かがまだ新しいアプリを実行せずに異なるウィンドウに動的にロードされたコンポーネントをレンダリングしようとしている場合、これは私がやった方法です：

    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');
    }
   }
1
RowdyArg

これは私が自分のために見つけたものであり、まさにあなたが必要とすることをします。

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

カスタムのangularコンポーネントを新しい子ウィンドウに表示できます。また、すべてのangularサービスは、子に表示されるコンポーネントにも挿入されます窓。

ポータルホストを含​​む新しいWindowComponentを定義します。このポータルホストは、子ウィンドウの本体に接続されます。これは、ポータルホストに接続されているポータルが子ウィンドウの本体に表示されることを意味します。ポータルホストにcomponentFactoryResolver、applicationRef、およびinjectorが渡されます。これにより、おそらくカスタムangularコンポーネントと子ウィンドウ内に必要なサービスを注入します。

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パッケージを使用すると、@ViewChildデコレータでComponentPortalを取得する代わりにCdkPortalを使用して、この例を変更してプログラムで子ウィンドウを作成することもできます。ポータルホストへの参照を取得することにより、プログラムで子ウィンドウのコンテンツを別のコンポーネントに置き換えることもできます。ポータルをポータルホストに接続する場合、インスタンス化されたコンポーネントのComponentRefを取得して、コードからコンポーネントとやり取りすることもできます。

1
Bubblewrap

target="_blank"属性を持つリンクを使用してそれを行うことができます

example.component.html

<a [routerLink]="['/route-to-your-component']" target="_blank">
  Open the component in a new tab
</a>
0
Nicolas Roehm

遅延ロードコンポーネントを（URLとして）作成し、URLを入れます

window.open('url', 'window name', 'settings')
0
Akhi Akl

別のウィンドウに名前を付けてみることができます。これにより、指定された名前で新しいウィンドウが開きます。

window.open('url', 'window 1', '');
window.open('url', 'window 2', '');
0
HardRocker