Angular 4 Portal / CdkPortal не работает в новом дочернем окне - PullRequest
Новая
       28

Angular 4 Portal / CdkPortal не работает в новом дочернем окне

2 голосов
/ 12 февраля 2020

Я работаю в приложении Angular 4, и мне нужно показать указанный компонент c в новом дочернем окне. Поэтому я ищу решение (я не ищу решение с маршрутизацией по URL, потому что мой сервер всегда перенаправляет c для индексации с помощью window.open ('some URL'), поэтому window.open ('') с может быть решение проблемы ataching), и я нашел этот пример * stack1blitz * Пример * StackBlitz

в этом примере используется CdkPortal. Проблема, очевидно, в том, что портал cdk не находится в angular 4 (я не уверен, но эта ошибка показывает @angular/cdk/portal"' has no exported member 'CdkPortal')

Я просто копирую и вставляю предыдущий пример, потому что couse - именно то, что мне нужно , но в моей angular версии не работает.

Есть ли эквивалентный пример для angular 4?

ДОПОЛНИТЕЛЬНО

в Например, они используют этот фрагмент кода, чтобы показать окно 

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

, поэтому мой вопрос ... возможно ли добавить другой компонент внутри компонента, который я хочу прикрепить на портале? Примерно так. 

<window *ngIf="showPortal">
  <my-other-component [currentValue]="someValue"></my-other-component>
</window>

Если это возможно, компонент будет работать правильно?

1 Ответ

0 голосов
/ 17 февраля 2020

Попробуйте это. Это создаст дочернее окно без использования CdkPortal.

Я использовал метод generi c window.open, чтобы открыть новое окно. Также я использовал свойство name окна, чтобы получить ссылку на открытое окно.

app.component.ts 

import { Component,ComponentFactoryResolver, ViewChild, ViewContainerRef,Injector } from '@angular/core';
import { DynamicWindowComponent } from './dynamic-window/dynamic-window.component';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  injector: Injector;
  OpenWindow : any

  constructor(private resolver: ComponentFactoryResolver) { }

  open(): void {
    const componentFactory = this.resolver.resolveComponentFactory(DynamicWindowComponent);
    let componentRef  = componentFactory.create(this.injector);
    this.OpenWindow = window.open('', 'childwindow', 'width=400,height=400,left=150,top=200');
    this.OpenWindow.document.body.innerHTML = "";
    this.OpenWindow.document.body.appendChild(componentRef.location.nativeElement);
  }

  close(){
    this.OpenWindow.close()
  }
}

app.component. html

<button (click)="open()">Dynamically Add Component</button>

Dynami c -window.component.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dynamic-window',
  templateUrl: './dynamic-window.component.html',
  styleUrls: ['./dynamic-window.component.css']
})
export class DynamicWindowComponent{
  close(){
    // get refence of child window by its name and close it
    let existingWin = window.open('', 'childwindow');
    existingWin.close();
  }
}

Dynami c -window.component. html

<p>Dynamic Component</p>
 <button (click)="close()">Close me!</button>

Рабочий пример ссылки

https://stackblitz.com/edit/angular-rbapx4?embed=1&file=src / app / app.component.ts

...