Question

Blockquote

如何在URL中设置参数？

我的代码为TS

import { KlassaktUserService,KlassaktStorageService, KlassaktApiService } from '../../core';
import { KlassaktDashboardService, Student, listData } from '../../core/api/dashboard.sevice';
import { DomSanitizer, SafeResourceUrl, SafeUrl} from '@angular/platform-browser';

declare var $: any;
@Component({ 
  selector: 'klassakt-photos',
  templateUrl: './photos.component.html' 
})
export class KlassaktPhotosComponent extends KlassaktDashboardComponent implements OnInit {
  }
  public loaderService: KlassaktLoaderService;

  async ngOnInit() {
    await super.ngOnInit();
  }
  public constructor(

    protected _dashboardService: KlassaktDashboardService,
    public _sanitizer: DomSanitizer) {      
    let  selectedStudent = {
      schoolId: "134"
    }
    this.src = this.sanitizer.bypassSecurityTrustResourceUrl(`http://designs.mydeievents.com/jq-3d-flip-book/index.html?id=${selectedStudent.schoolId}`)
  }
  }
  public get students(): Student[]
  {
    return this._dashboardService.account.students;
  } 
}

这是在component.html文件中找到的我的参数。

<p>Hi Arjun this is school Id {{selectedStudent.schoolId}}</p>

从ts文件中，我想传递相同的参数134是我的静态学校ID

 schoolId: "134"

如果我想设置动态参数，则代码在下面，但没有得到“参数”

 param : number = this.selectedStudent.schoolId;

但是我在项目中没有得到静态或动态参数。

如果我使用下面的代码工作正常。

@Input()
      url: string = "https://arjunwalmiki.blogspot.com/";
      urlSafe: SafeResourceUrl;
     this.urlSafe = this._sanitizer.bypassSecurityTrustResourceUrl(this.url);

    <iframe width="200px" height="300px" frameBorder="0" [src]="urlSafe"></iframe>

以上代码之所以有效，是因为其无参数调用而参数不起作用。

Answer 1

也许可行：

<iframe [src]="'http://designs.mydeievents.com/jq-3d-flip-book/index.html?id='+selectedStudent.schoolId"></iframe>

Answer 2

尝试这样：

TS：

import { DomSanitizer} from '@angular/platform-browser';

  constructor(private sanitizer: DomSanitizer) {

   let  selectedStudent = {
      schoolId: "101"
    }
    this.src = this.sanitizer.bypassSecurityTrustResourceUrl(`http://designs.mydeievents.com/jq-3d-flip-book/index.html?id=${selectedStudent.schoolId}`)
  }

HTML

<iframe [src]="src"></iframe>

Stackbiltz Demo

Answer 3

Angular会为您清理iframe网址，这样您就不能轻易将javascript注入其中，这是为了保护您免受XSS的侵害。以下问题中有解决方法。

How to set iframe src in Angular 2 without causing `unsafe value` exception?

Answer 4

这是我在混合打字稿，jquery和html之后找到解决方案的代码。

 <a (click)="showDiv(selectedStudent.schoolId)" data-toggle="modal" data-target="#exampleModal"> Arjun click here </a>


<!-- Modal -->

 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <!--<iframe id="myIframe" onload="delayedLoad()"></iframe>-->
                <div id="videoContainer">
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

              </div>
            </div>
          </div>
        </div>
showDiv(pageid) {

    this.autoPlayVideo(pageid)
  }

  autoPlayVideo(vcode) {
    $("#videoContainer").html('<iframe width="200px" height="200px" src="http://designs.mydeievents.com/jq-3d-flip-book/index.html?id=' + vcode + '" ></iframe>');
    };

感谢大家的宝贵时间。感谢@Adrita Sharma。

如何在角度6的网址中设置参数？

4 个答案: