如何在angular 6中设置url中的参数？

大宗报价

如何在URL中设置参数

我的代码如下

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>

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

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

如果我使用下面的代码工作良好

@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>

@Input（）
url:string=”https://arjunwalmiki.blogspot.com/";
urlSafe:SafeResourceUrl；
this.urlSafe=this.\u sanitizer.bypassSecurityTrustResourceUrl（this.url）；

上面的代码正在工作，因为它的无参数调用带有一个不工作的参数。

尝试如下：

TS:

从'@angular/platform browser'导入{domsanizer}

  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



试着这样做：

TS:

从'@angular/platform browser'导入{domsanizer}

  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]="'http://designs.mydeievents.com/jq-3d-flip-book/index.html?id='+selectedStudent.schoolId"></iframe>


也许这样可以：

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

Angular将为您清理iframe url，这样您就无法轻松地将javascript注入其中，这是为了保护您免受XSS攻击。
下面的问题有一些变通办法

Angular将为您清理iframe url，以便您无法轻松地将javascript注入其中，这是为了保护您免受XSS攻击。
下面的问题有一些变通办法

这是我在混合使用typescript、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>');
    };

Arjun单击此处
情态标题
&时代；
接近
showDiv（pageid）{
此.自动播放视频（pageid）
}
自动播放视频（vcode）{
$（“#videoContainer”）.html（“”）；
};

感谢大家的宝贵时间。spl感谢@Adrita Sharma。
这是我在混合使用typescript、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>');
    };

Arjun单击此处
情态标题
&时代；
接近
showDiv（pageid）{
此.自动播放视频（pageid）
}
自动播放视频（vcode）{
$（“#videoContainer”）.html（“”）；
};

感谢大家的宝贵时间。spl感谢@Adrita Sharma。
别担心，我一眼就认为这是HTML中的内联内容。@kshetline供您参考，要制作
src
字符串，您需要将其包装为单引号
“'src'”
当然，@karthigh，我只是误读了最初的答复，并想到了类似这样的内容：
，这也应该有效。@kshetline这不起作用，因为
“
试图解析quotes@Ehsan我尽量不说，我一眼就认为这是HTML中的内联内容。@kshetline仅供参考，要使
src
成为一个字符串，您需要用单引号
“'src'
”毫无疑问，@karthigh，我只是误读了原始答复，并想到了类似这样的内容：
，它也应该可以工作。@kshetline这不是
的工作方式
尝试解析quotes@Ehsan我尝试@james谢谢你编辑我的question@james谢谢你编辑我的问题亲爱的大家，有谁知道这个问题的解决办法吗？@ArjunWalmiki，你在你的url里放了“吗？”？请准确复制并粘贴我的答案，看看它是否有效。我尝试了你的解决方案供你参考。这是id=134的尝试，但没有显示任何内容。亲爱的，有人知道这个问题的解决方案吗。@ArjunWalmiki，你在你的url中放了'吗？请准确复制并粘贴我的答案，看看是否有效。我尝试了你的解决方案供你参考。这是id=134的尝试，但没有显示任何内容