Error: Cannot match any routes. URL Segment: 'null' in angular ionic

Issue

html page:

<ion-content>
  <iframe [src]="qrLink" width="100%" height="100%"></iframe> 
</ion-content>

ts page:

qrLink: string = null

ngOnInit() {
    this.getShop();
  }

  async getShop(){
    const shopId = this.route.snapshot.queryParamMap.get('shopId');

    if(shopId){
      this.shop = await this.shopService.getShopById(shopId);
      this.shopName = this.shop[0].name;
      this.qrLink = this.shop[0].menu.qrLink;
    }

  }

the qrLink veriable is not null. I checked in this way:

<ion-content>
  <iframe [src]="qrLink" width="100%" height="80%"></iframe>
  {{qrLink}
</ion-content>

How can I take this variable value to src?

Solution

I solved it. I should bypass security trust url:

constructor(
    ...
    private sanitizer: DomSanitizer
  ) {}

ngOnInit() {
  this.getShop();
}

async getShop(){
  const shopId = this.route.snapshot.queryParamMap.get('shopId');

  if(shopId){
    this.qrLink = this.shop[0].menu.qrLink;
    this.safeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.qrLink);
  }
}

and I use this veriable to src:

<iframe [src]="safeSrc" width="100%" height="100%"></iframe>

Answered By – gokeyn

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0