1

I developing web app with angular 4 and I have a problem with my params in url.

I have 5 fields, one of these is a base64 image, but when I call my component in the url show all params, is possible not show these? Because when I do click in my browser to write url is very slow, because there is a base64 code.

fm433403
  • 243
  • 1
  • 3
  • 8
  • 4
    If you don't want data to show in the URL, don't pass it as route parameter. Either use a shared service or use a resolver. – Günter Zöchbauer Aug 02 '17 at 07:15
  • localstorage might help too, depending on your application. (cookies or session variables) – F3L1X79 Aug 02 '17 at 07:19
  • You should read Victor Savkin's blog post about state management in angular applications (https://blog.nrwl.io/using-ngrx-4-to-manage-state-in-angular-applications-64e7a1f84b7b) because if you don't set the base64 of your image in url, it'll not be persistent with deep linking, so you have to take your parameters and find a solution based on this blog post I think. – Supamiu Aug 02 '17 at 07:24
  • Further detail on a shared service as mentioned in the comment from @GünterZöchbauer can be found [here](https://stackoverflow.com/documentation/angular/10836/sharing-data-among-components#t=201707280041088605019). Although as Supamiu mentioned, you may want to have some resource ID along with that so that your application can fetch the picture based on data in the URL. [This blog post](https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html) is useful for route resolvers – 0mpurdy Aug 02 '17 at 07:26
  • I am reading and the solution correct is shared service, but I don't know implement this, any idea? – fm433403 Aug 02 '17 at 07:29
  • https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service – Günter Zöchbauer Aug 02 '17 at 07:39

1 Answers1

0

At it's absolute simplest you can use a service which has a public value:

@Injectable()
export class Base64Share {
  image: string
}

(Although in many cases a Subject that can stream changes to components as the value changes is preferable)

You can then set the image in the parent:

constructor(private imageShare: Base64Share) {
  this.name = `Angular! v${VERSION.full}`
}

setImage() {
  this.imageShare.image = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
}

And get it in the child:

ngOnInit() {
  this.image = "data:image/png;base64, " + this.imageShare.image;
}

child template

<img [src]="image | safeUrl"/>

Live plunker example

0mpurdy
  • 3,198
  • 1
  • 19
  • 28
  • I have a question with your solution, why you add a Pipe? Thanks, this is my solution maybe! – fm433403 Aug 02 '17 at 08:33
  • Just because I think it is simpler than using the DomSanitizer in the component - personal preference – 0mpurdy Aug 02 '17 at 08:34
  • Is that in all my implementation I have not used any of that you say, explain me please? – fm433403 Aug 02 '17 at 08:40
  • Could you be a little bit more specific please? – 0mpurdy Aug 02 '17 at 08:41
  • DomSanitizer...in a moment I see that error, but in my constructor I do `this.foto = 'data:image/jpg;base64,' + this.foto.toString()` and work fine (I see the image) and error disappeared – fm433403 Aug 02 '17 at 08:52
  • Do you mean why is the DomSanitizer necessary? – 0mpurdy Aug 02 '17 at 09:04
  • Because without it you can get an error from Angular when you are setting the `src` of an image: see [this question and it's answers](https://stackoverflow.com/questions/38812993/base64-to-image-angular-2) for more detail – 0mpurdy Aug 02 '17 at 09:18
  • Bro, your code not work to image, return me WARNING: sanitizing unsafe URL value SafeValue must use [property]=binding. – fm433403 Aug 02 '17 at 10:22
  • are you using `[src]` the way that I did in the example? You can refer to the plunker I created to see the difference - it is working correctly – 0mpurdy Aug 02 '17 at 10:24
  • I obtain an error, `compiler.es5.js:1690 Uncaught Error: Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{foto|dataTableDetail}}] in ng:///AppModule/DataTableDetailComponent.html@74:14 (" style="float:center;width:100%; height:100%; max-height:80%; max-width:80%" [ERROR ->][src]={{foto|dataTableDetail}}/>` – fm433403 Aug 02 '17 at 10:25
  • Also remove the `{{}}` when adding square brackets to `[src]` see [this helpful guide](https://angular.io/guide/template-syntax#binding-syntax-an-overview) for more detail – 0mpurdy Aug 02 '17 at 10:26
  • No, and not really relevant, but if you're looking for Him you could try [reading more like this](http://biblehub.com/john/3-16.htm). You're welcome though – 0mpurdy Aug 02 '17 at 10:31