Как загрузить веб-сайт в виде iframe при нажатии кнопки и передать его URL в Angular

Question

Итак, у меня есть два разных angular проекта. Один - это веб-сайт целевой страницы, а другой - сайт, на котором продаются книги.

Компонент целевой страницы имеет параметр маршрута в своем URL-адресе (http://localhost: 8000 / landing / RwgnUvDpEicFA5pWF ) и кнопка:

<button type="button" class="btn btn-primary">Buy Books</button>

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

Кто-нибудь знает, как я могу go об этом?

Answer 1

Вам нужно сделать немало шагов, чтобы добраться туда.

1. Привязать обработчик событий для события кнопки mouseup или click.
2. Получить текущий конец маршрутизатора и укажите его в свой URL-адрес iframe.
3. Очистите URL-адрес iframe.
4. Установите логический флаг для отображения iframe.

Компонент

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

import { NavigationEnd, Router } from '@angular/router';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit, OnDestroy {
  iframeUrl: string;
  showIframe = false;
  routerSubscription: any;

  constructor(private _router: Router, private _sanitizer: DomSanitizer) { }

  ngOnInit() {
  }

  public mouseUp(event: any) {
    this.routerSubscription = this._router.events.filter(e => e instanceof NavigationEnd).subscribe(
      event => {
        this.iframeUrl = "url to iframe/" + event['urlAfterRedirects'];
        this.iframeUrl = this._sanitizer.bypassSecurityTrustResourceUrl(this.iframeUrl);
        this.showIframe = true;
      }
    );
  }

  ngOnDestroy() {
    if(this.routerSubscription) {
      this.routerSubscription.unsubscribe();
    }
  }
}

Шаблон

<button type="button" class="btn btn-primary" (mouseup)="mouseUp($event)">Buy Books</button>

<ng-container *ngIf="showIframe">
  <iframe [src]="iframeUrl" width="100%" height="100%" frameBorder="0" scrolling="no">Alternative text</iframe>
</ng-container>