Блог

Я пытаюсь открыть новое окно при нажатии кнопки «Просмотр» следующим образом :

Это мой код родительской страницы:

 export class PendingVerificationRequestComponent implements OnInit {
  injector: Injector;
  OpenWindow: Window;

  constructor(private resolver: ComponentFactoryResolver) { }

  viewDocument(doc) {
    const componentFactory = this.resolver.resolveComponentFactory(DocumentDetailsComponent);
    let componentRef  = componentFactory.create(this.injector);
    this.OpenWindow = window.open('', 'childwindow', 'width=900, height=600, left=200, top=100');
    this.OpenWindow.document.body.innerHTML = "";
    document.querySelectorAll('link, style').forEach(htmlElement => {
      this.OpenWindow.document.head.appendChild(htmlElement.cloneNode(true));
    });
    this.OpenWindow.document.body.appendChild(componentRef.location.nativeElement);

  }
}
 

Это мой ts-файл DocumentDetailsComponent :

 export class DocumentDetailsComponent implements OnInit {
  documentForm: FormGroup;
  constructor(private fb: FormBuilder) { }

  close(){
    let existingWin = window.open('', 'childwindow');
    existingWin.close();
  }

  ngOnInit() {
    this.documentForm = this.fb.group({
      docType: ['',Validators.required],
      docValue: ['',Validators.required],
      action: ['',Validators.required],
      remarks: [''],
    });
  }
}
 

и это html :

 <form [formGroup]="documentForm">

</form>
<iframe src="https://research.google.com/pubs/archive/44678.pdf"
width="100%" height="100%"></iframe>
 

Теперь, как только я удалю строку

 private fb: FormBuilder
 

из document-details.component.ts него открывается всплывающее окно нового окна с iframe. Но как только я добавляю FormBuilder в конструктор, он выдает следующую ошибку:

 ERROR TypeError: Cannot read property 'get' of undefined
    at resolveDep (VM30651 vendor.js:58638)
    at createClass (VM30651 vendor.js:58524)
    at createDirectiveInstance (VM30651 vendor.js:58399)
    at createViewNodes (VM30651 vendor.js:59625)
    at createRootView (VM30651 vendor.js:59539)
    at callWithDebugContext (VM30651 vendor.js:60547)
    at Object.debugCreateRootView [as createRootView] (VM30651 vendor.js:60057)
    at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (VM30651 vendor.js:57878)
    at ComponentFactoryBoundToModule.push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create (VM30651 vendor.js:46401)
    at PendingVerificationRequestComponent.push../src/app/ram/player/pending-verification-request/pending-verification-request.component.ts.PendingVerificationRequestComponent.viewDocument (VM87584 player-player-module.js:18543)
 

Есть какое-либо решение для этого?

Вот ссылка на stackblitz: https://stackblitz.com/edit/angular-tcjqqs

Глядя на ошибку, я думаю Injector , что зависимость ‘s не была разрешена, поэтому я просто объявил ее в конструкторе AppComponent.

 constructor(
    private resolver: ComponentFactoryResolver,
    private injector: Injector
  ) {}
 

Не уверен, почему FormBuilder это повлияло на него.
Обновленный Stackblitz здесь.