需要将数据动态传递到角度2中资产文件夹中存在的iframe

Question

在app / app.component.html中：

<div class="container">
  <div class="row">
    <div class="col-md-6">
       <iframe width="100%" height="300" src="/assets/frameDataItem.html" (load)="onload()"></iframe>
     </div>
    <div class="col-md-6">
       <app-list (Selected_Id_Selected)="IdSelectedInParent($event)"></app-list>
    </div>
  </div>
</div>

在app / app.component.ts中：

import { Component, OnInit } from '@angular/core';
import {DomSanitizer,SafeResourceUrl,} from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  //url:SafeResourceUrl = '';
  Id_Selected :string;
  count: number=0;
  constructor(public sanitizer:DomSanitizer){}

  ngOnInit() {
    //this.url = this.sanitizer.bypassSecurityTrustResourceUrl("frameDataItem.html");      
}
IdSelectedInParent(value):void{
  this.Id_Selected = value;
  //document.getElementById("frame"+value).style.color = "red";

 // console.log(value);
  //this.onload();
}
onload(){
   // console.log("value");
  //if(this.count == 0){

 // }else{
   // document.getElementById("frame"+this.Id_Selected).style.color = "red";
 // }
 // this.count++;
}
}

在app / list / list.component.ts中：

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

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
  frame : any[];
  Selected_Id : string = "";
  styleImpl : string;

  @Output()
  Selected_Id_Selected : EventEmitter<string> = new EventEmitter<string>();
  constructor() {
    this.frame = ["frameDataItem0","frameDataItem1","frameDataItem2","frameDataItem3","frameDataItem4"];
   }

   selectedIDPassed(value){
     this.styleImpl = value;
     this.Selected_Id = value;
     //document.getElementById(value).style.color = "red";
     this.Selected_Id_Selected.emit(this.Selected_Id);
     //console.log(this.Selected_Id);
   }
  ngOnInit() {
  }

}

在app / list / list.component.html中：

<div>
  <div *ngFor="let x of frame;let i = index">
    <div id="{{i}}" (click)="selectedIDPassed(i);" [class.selectedOption]="i == styleImpl">{{x}}
    </div>
   </div>
</div>

在assets / frameDataItem.html中：

<div id="0">frameDataItem0</div>
<div id="1">frameDataItem1</div>
<div id="2">frameDataItem2</div>
<div id="3">frameDataItem3</div>
<div id="4">frameDataItem4</div>

我已将ID从子组件（列表）传递到父组件（应用）。 传递的ID放在父组件的“ Id_Selected（例如1或2 ...）”变量中， 希望将此ID传递给父组件中存在的Iframe 以便根据该Iframe包含的数据突出显示 传递的ID。请注意，资产文件夹中存在Iframe。感谢您

output