Gambar latar belakang saya tidak berfungsi karena URL memiliki spasi di dalamnya dan karena itu saya perlu menyandikannya ke URL.
Anda dapat memeriksa apakah ini masalah yang Anda alami dengan mencoba URL gambar lain yang tidak memiliki karakter yang perlu keluar.
Anda bisa melakukan ini ke data dalam komponen hanya menggunakan Javascripts built in encodeURI () metode.
Secara pribadi saya ingin membuat pipa untuk itu sehingga bisa digunakan dalam template.
Untuk melakukan ini, Anda dapat membuat pipa yang sangat sederhana. Sebagai contoh:
src / app / pipe / encode-uri.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'encodeUri'
})
export class EncodeUriPipe implements PipeTransform {
transform(value: any, args?: any): any {
return encodeURI(value);
}
}
src / app / app.module.ts
import { EncodeUriPipe } from './pipes/encode-uri.pipe';
...
@NgModule({
imports: [
BrowserModule,
AppRoutingModule
...
],
exports: [
...
],
declarations: [
AppComponent,
EncodeUriPipe
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
src / app / app.component.ts
import {Component} from '@angular/core';
@Component({
// tslint:disable-next-line
selector: 'body',
template: '<router-outlet></router-outlet>'
})
export class AppComponent {
myUrlVariable: string;
constructor() {
this.myUrlVariable = 'http://myimagewith space init.com';
}
}
src / app / app.component.html
<div [style.background-image]="'url(' + (myUrlVariable | encodeUri) + ')'" ></div>