以角度 2/4 隐藏部分 url答案

【问题标题】：Hide part of url in angular 2/4以角度 2/4 隐藏部分 url
【发布时间】：2017-09-25 09:50:29
【问题描述】：

我正在使用 angular 4。我有一种情况，我必须使用 router.navigate 路由到另一个组件，如下所示。

url="/screenpath/firstScreen"
this._router.navigate(["/path/guided/"+url]);

这将是路由

localhost:4200/path/guided/screenpath/firstScreen

url 的设置是基于我从其余端点获得的 screenPath 动态设置的。现在我的 question 是

是否可以隐藏 url 部分，使其不显示在浏览器中。我不想隐藏完整的 url，而只隐藏“url”，即我只想显示

localhost:4200/path/guided/

我知道 skipLocationChange 会隐藏 url。但这会隐藏我不想要的整个 url。

请帮助。任何帮助表示赞赏。

【问题讨论】：

我猜你可以手动替换组件初始化的url：window.history.pushState("", "", '/path/guided');请记住，此网址将在您的浏览器历史记录中，因此请不要忘记处理此问题
哪个组件的组件初始化？我要登陆的那个？ url 是从后端获取的，有数百个可能的组件，我必须在所有组件中都这样做吗？
我认为一个击球手的方法是创建一个监听路由变化的服务。如果你的 url 包含一些 url（例如“screenpath”）然后改变 url
您可以使用数据参数作为路由。例如： {path: 'some-path', component: Cmp , data: {screen: 'first'} }
@bharath 我希望用户看到网址的一部分。！

标签： angular angular2-routing

【解决方案1】：

您可以像这样手动更改网址：

 window.history.pushState("", "", '/path/guided/');

请记住，此 url 将保存在浏览器历史记录中，因此您应该处理用户直接路由到 /path/guided 的情况。

因为它是您希望在许多组件中通用的东西，所以我建议您为此使用服务。

service.ts:

import {NavigationEnd} from "@angular/router";

routerObservableInstance$;

 constructor(private router: Router){
  this.subscribeToRouteChange();
}

subscribeToRouteChange(){
   this.routerObservableInstance$ = this.
   .router
   .events
   .filter(event=>event instanceof NavigationEnd)
   subscribe(event => {
   if(event.urlAfterRedirects.indexOf('screenpath')!=-1){
      window.history.pushState("", "", '/path/guided/');
   }
 }
}

onDestroy(){
  this.routerObservableInstance.unsubscribe();
}

在服务中，您订阅任何路由更改并仅过滤掉“NavigationEnd”类型的事件（从 @angular/router 导入）。然后您应该检查您的路由器 url 以及它是否包含屏幕路径（或您决定的任何其他字符串) 你将路径更改为 /path/guided。

【讨论】：