Как установить параметр в URL в угловых 6?

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, это мой статический школьный идентификатор

 schoolId: "134"

, если я хочу установить динамический параметр, код приведен ниже, но не получается "param "

 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

Это мой код после набора текста, 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>');
    };

Спасибо всем за ваше драгоценное время. Spl благодаря @Adrita Sharma.

Answer 3

Angular очистит для вас URL-адрес iframe, поэтому вы не сможете легко внедрить в него javascript, чтобы защитить вас от XSS.В следующем вопросе есть обходные пути.

Как установить iframe src в Angular 2, не вызывая исключение "небезопасное значение"?

Answer 4

Попробуйте так:

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