- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 angular 2.0 ,特别是 routing用于此问题的功能。我设置路由的方式如下所示。
const routes: Routes = [
{ path : ':filePath', component: ParentDisplayComponent,
children : [
{ path : 'metadata', component: MetadataDisplayComponent },
{ path : 'data', component : DataDisplayComponent }
]
}
];
如您所见,我的 url 最终可能看起来像这样。
<host>:<port>/#/<file path>/metadata
但是,因为我正在制作某种文件浏览器,所以我的“文件路径”(初始参数)看起来像这样。
/foo/bar/baz
为了完成这项工作,我不得不转义斜杠,所以现在我的网址最终看起来像这样
<host>:<port>/#/%252ffoo%252fbar%252fbaz/metadata
我知道这或多或少“不错”,但我非常讨厌它的外观,而且就手动输入 url 而言,它对用户来说不是很友好。有没有人对如何使我的网址更加用户友好有任何建议?我确实需要一个父级组件来跟踪所选文件,这就是我没有做这样的事情的原因。
<host>:<port>/#/metadata?path=/foo/bar/baz
这样做的原因是我希望我的应用程序始终在屏幕左侧有一个“浏览器”(类似于 Windows 资源管理器),屏幕中间有一个可交换组件。想象一下这样的事情。
___________________________
|___________________________|
| |
|file a | ____________________
|file b | |swappable component|
|file c | ---------------------
|etc... |
这可能已经够啰嗦了。考虑到我必须有包含斜杠的参数,有没有人有任何想法让我的 url 更好?
最佳答案
Angular2 默认使用 encodeURIComponent() 对 URL 中的查询参数进行编码,您可以通过编写自定义 URL 序列化程序并覆盖默认功能来避免它。
就我而言,我想避免使用 Angular2 以避免将逗号 (,) 替换为 (%2)。我将查询作为 lang=en-us,en-uk 传递,它被转换为 lang=en-us%2en-uk。
我是这样算的:
CustomUrlSerializer.ts
import {UrlSerializer, UrlTree, DefaultUrlSerializer} from '@angular/router';
export class CustomUrlSerializer implements UrlSerializer {
parse(url: any): UrlTree {
let dus = new DefaultUrlSerializer();
return dus.parse(url);
}
serialize(tree: UrlTree): any {
let dus = new DefaultUrlSerializer(),
path = dus.serialize(tree);
// use your regex to replace as per your requirement.
return path.replace(/%2/g,',');
}
}
将以下行添加到您的主 appModule.ts
import {UrlSerializer} from '@angular/router';
import {CustomUrlSerializer} from './CustomUrlSerializer';
@NgModule({
providers: [{ provide: UrlSerializer, useClass: CustomUrlSerializer }]
})
这不会破坏您的默认功能,并会根据您的需要处理 URL。
关于angular - 如何防止对 URL 中的斜杠进行编码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41578917/
我有一个右下角倾斜的元素,我必须在其上放置一个盒子阴影。有时倾斜的 Angular 被徽章覆盖 - 我的问题不适用,如果是这样的话: 这是信息框及其边 Angular 的 (s)css 部分(还有更多
是否可以在纯 html/css 中创建类似下面的内容? 我想做这个响应式和全 (100%) 宽度(最大左 Angular 100 像素,右边最小 50 像素,类似的东西)。 最佳答案 您可以通过转换(
如何在 fabricjs 文本中为文本提供渐变或斜 Angular 效果?? http://fabricjs.com/fabric-intro-part-2/ 这里给出了形状和所有示例,我将其与文本绑
我用过: http://apps.eky.hk/css-triangle-generator/ 为彼此对 Angular 放置的两个不等边三 Angular 形生成 css: 左下三 Angular
我是一名优秀的程序员,十分优秀!