相关疑难解决方法(0)

获取Angular中的当前URL

如何在AngularJS 4中获取当前URL?我在网上搜索了很多,但无法找到解决方案.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Router } from '@angular/Router';

import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { OtherComponent } from './other/other.component';
import { UnitComponent } from './unit/unit.component';

@NgModule ({
  declarations: [
    AppComponent,
    TestComponent,
    OtherComponent,
    UnitComponent
  ],

  imports: [
    BrowserModule,
    RouterModule.forRoot([
        {
            path: 'test',
            component: TestComponent
        },
        {
            path: 'unit',
            component: UnitComponent
        },
        {
            path: 'other',
            component: OtherComponent
        }
    ]),
  ],

  providers: …
Run Code Online (Sandbox Code Playgroud)

javascript url-routing typescript angular

101
推荐指数
3
解决办法
22万
查看次数

Angular 2路由器事件监听器

如何在Angular 2路由器中监听状态变化?

在Angular 1.x中我使用了这个事件:

$rootScope.$on('$stateChangeStart',
    function(event,toState,toParams,fromState,fromParams, options){ ... })
Run Code Online (Sandbox Code Playgroud)

所以,如果我在Angular 2中使用这个eventlistener:

window.addEventListener("hashchange", () => {return console.log('ok')}, false);
Run Code Online (Sandbox Code Playgroud)

它不是返回'ok',然后从JS更改状态,然后才运行浏览器history.back()函数.

使用router.subscribe()函数作为服务:

import {Injectable} from 'angular2/core';
import {Router} from 'angular2/router';

@Injectable()
export class SubscribeService {
    constructor (private _router: Router) {
        this._router.subscribe(val => {
            console.info(val, '<-- subscribe func');
        })
    }
}
Run Code Online (Sandbox Code Playgroud)

在路由中初始化的组件中注入服务:

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';

@Component({
    selector: 'main',
    templateUrl: '../templates/main.html',
    providers: [SubscribeService]
})
export class MainComponent {
    constructor (private subscribeService: SubscribeService) {}
}
Run Code Online (Sandbox Code Playgroud)

我将此服务注入其他组件,例如本例中.然后我改变状态,console.info()在服务中不起作用.

我做错了什么?

javascript typescript angular2-routing angular

59
推荐指数
3
解决办法
8万
查看次数

如何从完整的url字符串中获取唯一的路径

使用Router(this.router.url)时/MyRouterName?type=abc,/MyRouterName如果没有参数,我会得到字符串

我是否只能/MyRouterName从完整的URL 获取路径(对于所有情况)?

angular2-routing

22
推荐指数
4
解决办法
5万
查看次数

使用Angular2,如何在登录重定向之前重定向到以前的URL

使用Angular2创建单页面应用程序,我将拦截未经身份验证的用户访问自定义中的非公共路由RouterOutlet并将其重定向到登录视图.成功登录后,我想将用户重定向到最初请求的视图,而不是默认视图.

我注意到Router有一个renavigate()导航到最后一条成功路线的功能,但最后一条成功的路线是,/auth/login而不是最初请求的网址.

基本上:我如何访问或确定以前请求的URL?

我真的不想求助于传递查询字符串参数,除非我真的需要.理想情况下,访问history集合作为Router组件的一部分会很好,类似于backbone.history!

redirect angular2-routing angular

16
推荐指数
3
解决办法
1万
查看次数

角度2 - 检查当前活动路线"名称"

我有一个带有几个嵌套子视图的Angular 2应用程序.但它会显示在同一页面上router-outlet.

const routes: Routes = [
    {
        path: 'queue/:date/:offset/:type',
        component: BundleListComponent,
        resolve: {
            response: BundleListResolve
        },
        children: [
            {
                path: ':bundleId', component: PointListComponent,
                resolve: {
                    response: PointListResolve
                },
                children: [
                    {
                        path: ':pointId', component: TaskListComponent,
                        resolve: {
                            response: TaskListResolve
                        },
                        children: [
                            {
                                path: ':taskId', component: TaskDetailComponent,
                                resolve: {
                                    response: TaskDetailResolve
                                }
                            },
                            { path: '', component: EmptyComponent }
                        ]
                    },
                    { path: '', component: EmptyComponent }
                ]
            },
            { path: '', component: EmptyComponent }
        ]

    }, …
Run Code Online (Sandbox Code Playgroud)

angular2-routing angular

15
推荐指数
2
解决办法
2万
查看次数

Angular 2获取当前路线

因此,我需要以某种方式检查我是否在主页上并做某事,而在其他页面中则不这样做.还在所有页面上导入该组件.

如果我在主页上,如何检测该组件?

谢谢

routes typescript angular2-routing angular

15
推荐指数
3
解决办法
5万
查看次数

Angular router url返回斜杠

我试图通过使用路由器获取当前的路由器路径,但是当我这样做console.log(this.router.url)时返回"/",虽然我在"/ login".但是当我安慰整个this.router对象时,有一个url值为"/ login" 的属性.

这是来自app.component.ts的代码

export class AppComponent implements OnInit{
  constructor(private router: Router) {}

  ngOnInit(){
    console.log(this.router);
  }

}
Run Code Online (Sandbox Code Playgroud)

app.module.routing.ts

import {NgModule} from '@angular/core';
import {PreloadAllModules, RouterModule, Routes} from '@angular/router';

import {NotFoundComponent} from './not-found/not-found.component';
import {AuthGuard} from './auth/auth-guard.service';

const appRoutes: Routes = [
  { path: '', loadChildren: './first/first.module#FirstModule'},
  { path: 'login', loadChildren: './login/login.module#LoginModule'},
  { path: '404', component: NotFoundComponent, canActivate: [AuthGuard] },
  { path: '**', redirectTo: '/404'}
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, {preloadingStrategy: PreloadAllModules})],
  exports: [RouterModule]
}) …
Run Code Online (Sandbox Code Playgroud)

routing angular

8
推荐指数
3
解决办法
6840
查看次数

我们如何从ionic 4中的app.component获取当前页面?

我正在尝试在ionic 4的app.component中获取当前页面实例。

在ionic 3中,我可以这样做

this.nav.getActive()。instance

angular ionic4

7
推荐指数
2
解决办法
5853
查看次数

如何仅在某些页面上隐藏我的左侧导航菜单

我正在处理 angular5/html 5 项目。我有一个侧面导航菜单组件,它显示在我的应用程序的所有页面上。问题是这个侧边导航菜单组件是动态的,如果在应用程序中添加更多页面,它会自动更新。

现在我想做的是仅在某些页面上隐藏此菜单。例如,我想在第 1-5 页保持可见,在第 6-8 页隐藏,在第 9 和 10 页再次可见。我应该怎么做?

这是我为侧导航菜单编辑的 html 代码:

<aside>
  <div class="sidebar">
    <nav>
      <div class="sidebar__wrap">

        <ol class="left-nav">
        </ol>
      </div>
    </nav>
  </div>
</aside>
Run Code Online (Sandbox Code Playgroud)

html routes navigationbar angular

4
推荐指数
1
解决办法
1430
查看次数

Angular 7:如何获取当前页面的完整URL

如何在不使用angular 7的情况下获取完整的当前URL window.location.href

例如,假设我当前的网址是 http://localhost:8080/p/drinks?q=cold&price=200

如何获得完整的URL而不仅仅是完整的URL /p/drinks?q=cold&price=200

我已经尝试过使用this.router.url此命令,但/p/drinks?q=cold&price=200不能提供完整的主机名。

我不想使用的window.location.href原因是它导致ng-toolkit / universal中的渲染出现问题

我尝试遵循此解决方案,这似乎与我存在相同的问题,并且也进行了更新

如何在Angular2中获取服务域名

这是我的代码

windowProvider.js

import { InjectionToken, FactoryProvider } from '@angular/core';

export const WINDOW = new InjectionToken<Window>('window');

const windowProvider: FactoryProvider = {
  provide: WINDOW,
  useFactory: () => window
};

export const WINDOW_PROVIDERS = [
  windowProvider
];
Run Code Online (Sandbox Code Playgroud)

app.module.ts中

@NgModule({
    .......
    providers:[
    .......
    windowProvider
   ]
})
Run Code Online (Sandbox Code Playgroud)

在我的必填页面中:

import {WINDOW as WindowFactory} from '../../factory/windowProvider';
......
 constructor(private router: Router, private helper: Helpers, …
Run Code Online (Sandbox Code Playgroud)

javascript angular-universal angular angular7

2
推荐指数
1
解决办法
2205
查看次数

Angular 在 Guard 中获取匹配的 url 路径

我的路由是

{
path:'contacts/:id',
component: contactDetail
}
Run Code Online (Sandbox Code Playgroud)

canActivateChild( route: ActivatedRouteSnapshot,
state: RouterStateSnapshot) { 
  console.log(state.url); 
}
Run Code Online (Sandbox Code Playgroud)

state.url返回/contacts/1我需要的是匹配的url/contact/:id是否有可能获得匹配的url?

angular angular-router-guards angular-router angular-routerlink

2
推荐指数
1
解决办法
4170
查看次数