是否可以导航到路由而不在 url 中显示参数？答案

【问题标题】：It's possible navigate to route without showing params in url?是否可以导航到路由而不在 url 中显示参数？
【发布时间】：2017-08-02 07:13:42
【问题描述】：

我用 Angular 4 开发网络应用程序，但我的 url 参数有问题。

我有 5 个字段，其中一个是 base64 图像，但是当我在 url 中调用我的组件显示所有参数时，可能不显示这些吗？因为当我在浏览器中点击写url时很慢，因为有base64代码。

【问题讨论】：

如果您不想在 URL 中显示数据，请不要将其作为路由参数传递。使用共享服务或使用解析器。
localstorage 也可能有所帮助，具体取决于您的应用程序。（cookie 或会话变量）
您应该阅读 Victor Savkin 的关于 Angular 应用程序中的状态管理的博文 (blog.nrwl.io/…)，因为如果您不在 url 中设置图像的 base64，深度链接将不会持久，因此您必须根据我认为的这篇博客文章获取参数并找到解决方案。
@GünterZöchbauer 的评论中提到的共享服务的更多细节可以在here 找到。尽管正如 Supamiu 提到的，您可能希望同时拥有一些资源 ID，以便您的应用程序可以根据 URL 中的数据获取图片。 This blog post 对路由解析器很有用
我正在阅读，正确的解决方案是共享服务，但我不知道实现这个，有什么想法吗？

标签： angular

【解决方案1】：

您可以使用具有公共价值的服务，这绝对是最简单的：

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

（尽管在许多情况下，可以在值更改时将更改流式传输到组件的Subject 更可取）

然后您可以在父级中设置图像：

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

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

并在孩子身上得到它：

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

子模板

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

Live plunker example

【讨论】：

我对您的解决方案有疑问，为什么要添加管道？谢谢，这也许是我的解决方案！
只是因为我觉得比在组件中使用DomSanitizer更简单——个人喜好
在我的所有实现中我都没有使用过你说的任何一个吗，请解释一下？
您能说得具体一点吗？
DomSanitizer...一会儿我看到了那个错误，但在我的构造函数中我做了this.foto = 'data:image/jpg;base64,' + this.foto.toString() 并且工作正常（我看到了图像）并且错误消失了