Angular 2 : Update the iframe src when router url gets change

Question

应用程序有一个顶部栏，上面有 3 个仪表板按钮。每个链接都会通过 iframe 在页面上打开一个新的仪表板。
app.component.html

<md-toolbar class="toolbar">
  <span>Dashboardds</span>
  <span class="spacer"></span>
  <button md-button  [routerLink]="['/dashboard', 'first']"  id="first" class="top-link">First</button>
  <button md-button  [routerLink]="['/dashboard', 'second']"  id="second" class="top-link">Second</button>
  <button md-button  [routerLink]="['/dashboard', 'third']"  id="third" class="top-link">Third</button>
</md-toolbar>
<router-outlet></router-outlet>

app.module.ts

{path: 'dashboard/:id', component: DashboardComponent},
{path: '', redirectTo: 'dashboard/first', pathMatch: 'full'},
{path: '**', redirectTo: 'dashboard/first', pathMatch: 'full'}

仪表板组件非常简单。它有 3 个 url 和 1 个 iframe。
dashboard.component.html

export class DashboardComponent implements OnInit, OnChanges {
dashboardUrl: SafeUrl;
  first_url: string = "first url of the dashboard";
  second_url:string="second url of the dashboard";
  third_url:string="third url of the dashboard";


  constructor(private route: ActivatedRoute, private sanitizer: DomSanitizer) {
    //console.log("Constructor "+route.snapshot.params['id']);
    this.dashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.first_south_url);
  }

  ngOnInit() {
    this.dashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.first_south_url);
  }

  ngOnChanges(changes: SimpleChanges){
  }
}

dashboard.component.html

<iframe id="report-frame" frameborder="0" [src]="dashboardUrl"></iframe>

如何根据顶部栏上单击的按钮更新 iframe url 并使用新的 url 重新加载 iframe？

Answer 1

您应该在 dashboard.component.ts 文件中订阅 ActivatedRoute 对象，以获取路由中的更改并更新 iframe。为了避免在设置 iframe 目标时出现不安全值错误并保持代码整洁，您应该在管道中使用 DomSanitizer。

safe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(
    private sanitizer: DomSanitizer
  ) { }

  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

另外，不要忘记将 SafePipe 添加到 AppModule 的声明中。

dashboard.component.ts

export class DashboardComponent implements OnInit {
  private dashboardUrl: string;
  private urlMap: { local: string, remote: string }[] = [
    { local: "first", remote: "http://google.com" },
    { local: "second", remote: "http://stackoverflow.com" }
    // ...
  ];

  constructor(
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      let localParam = params['id'];
      this.dashboardUrl = this.urlMap.filter(x => x.local == localParam)[0].remote;
    });
  }
}

dashboard.component.html

<iframe id="report-frame" frameborder="0" [src]="dashboardUrl | safe"></iframe>