标签: angular-routing

我在尝试浏览不同的路线时遇到了问题.

我有两个不同的路线模块.

app.routes.ts:

仅包含LoginPage:

export const routes: Routes = [
  {
    path: 'login',
    component: LoginPageComponent,
    canActivate: [PreventLoggedInAccess]
  },
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'login'
  }
];

export const Routing: ModuleWithProviders = 
    RouterModule.forRoot(routes, { useHash : true });

使用PreventLoggedInAccess.canActivate,如果用户已经登录,则将其重定向到具有/app前缀和子路由的登录部分home.它被定义为:

canActivate(): boolean {
  if (!this._authService.isAuthenticated()) {
      return true;
  }
  this._router.navigate(['/app/home']);
  return false;
}

pages.routes.ts:

包含/app仅在用户登录时才可访问的所有子路由.这可以通过以下方式实现AuthGuardService.canActivateChild:

export const pageRoutes: Routes = [ …

我正在尝试实现named routes,所以我不必编写整个路径(经常更改).

我以为我可以逃避编写一个服务,该服务将返回已定义路由的列表以及将对象转换为路径的过滤器

使用示例如下所示:

<a ng-href="{id:1}|route:'detail'">Click here!</a>

如果我在路由定义中添加了名称:'detail',则会产生以下结果:

<a href="#/detail/1/">Click here!</a>

我认为这很简单,但是:

如何获取已定义路线的列表？

我以为我可以使用routeProvider,但AFAIK它没有我可以访问的公共方法或属性.

我有一个带有Sails JS后端的Angular JS应用程序,并且在路径内(在app.js中)我有:

.state('app.detail', {
  url: "/detail",
  views: {
    'menuContent' :{
      templateUrl: "templates/detail.html",
      controller: 'UserUpdateCtrl',
      resolve: {
        auth: ["$q", "userData", function($q, userData) {
          var userInfo = userData.getUserInfo();
          if (userInfo) {
            return $q.when(userInfo);
          } else {
            return $q.reject({ authenticated: false });
          }
        }]
      },
    }
  }
})

(这是遵循本指南)

现在在同一个文件中,我有$ routeChangeError:

.run(function($rootScope) {
  $rootScope.$on("$routeChangeError", function(event, current, previous, eventObj) {
    if (eventObj.authenticated === false) {
      $location.path("/login");
    }
  });

在chrome上调试时,我看到函数已定义,但未调用.
我在这里错过了什么？

我有这个(主要的父母)组件 -

@RouteConfig([
    { path: '/', name: 'ProjectList', component: ProjectListComponent, useAsDefault: true },
    { path: '/new', name: 'ProjectNew', component: ProjectFormComponent },
    { path: '/:id', name: 'ProjectDetail', component: ProjectDetailComponent },
    { path: '/:id/issues/...', name: 'Issue', component: IssueMountComponent },
])
class ProjectMountComponent {
}

然后我有第二个mount组件(主父的子代,下一个组件的父代)

@Component({
        template: `
        <div><router-outlet></router-outlet></div>
    `,
        directives: [RouterLink, RouterOutlet]
})
@RouteConfig([
        { path: "/", name: "IssueList", component: IssueListComponent, useAsDefault: true },
])
class IssueMountComponent {
    constructor(private _routeParams: RouteParams) {
    }
}

在这里,我可以毫无问题地访问routeParams(:id).现在,这是我需要:id来自uri 的值的组件.

@Component({
        template: ` …

我们有一个使用Angular的项目,但仅限于UI绑定/ AJAX方面,而不是任何类型的路由或SPA功能.

我们希望能够#section-2在我们选择的CMS中编写的文章中使用锚点链接(),以及使用其他页面的锚点链接(/my-page#section-C),但是Angular #/section-2会将这些链接重写为,这会破坏CMS设置的锚点链接.

无法扩充CMS以修改锚链接的处理方式.

有可能:

1. hashchange从Angular中删除事件绑定？我看到这个事件附加在源文件中src/ng/browser.js,它处理一些路由和链接重写,但是它在一个闭包内部,所以不能直接访问它(我们从CDN链接到Angular所以不可能修改Angular源代码,加上我们不想维护自己的"自定义"Angular源代码.

2. 设置一个选项或调用一个配置方法,最终禁用Angular的整个路由方面,并防止它重写任何类型的链接？(或者,有没有办法不包括Angular的这部分,但仍保留控制器/ UI绑定/ AJAX功能？)

请注意,我已经尝试过这个:

$locationProvider.html5Mode(true)

但是,它会使网站上的所有其他链接无法运行,因为所有链接都通过Angular进行处理.因此,如果我链接到主页(<a href="/">Home</a>)并单击带有html5modeon的链接,则链接不执行任何操作.

我想创建一个带有多个参数的路由链接,并将它们绑定在tempalte中.到目前为止,我一直在通过执行(click)事件的函数来做到这一点,但我想知道它是否可能在RouterLink绑定中.

这是我用来绑定参数的函数:

redirect() {
    this._router.navigate( ['/category', { cat: this.category, page: this.page }]);
}

我的路线看起来像:

{
    path: 'category/:cat/:page',
    component: PostComponent
}

我可以做同样的内部routerLink指令吗？

我正在尝试将Lazy Loading实现到我的应用程序中,但似乎遇到了一个问题,我得到了错误消息:

// External Dependencies
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// Internal Dependencies
import { MaterialModule } from '../app/configuration/material/material.module';
import { SharedModule } from '../app/application/shared/shared.module';
import { RoutingModule } from '../app/configuration/routing/routing.module';
import { SettingsModule } from '../app/application/settings/settings.module';

import { AppComponent } from './app.component';

import { SearchService } from './application/shared/services/search.service';

@NgModule({
  declarations: [AppComponent],
  imports: [ …

在我的一些角度路线防护中,我想设置"下一个"路径,在成功登录后重定向到.

因此,oridinary guard canActivate功能签名如下所示:

public canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | boolean {
  // ...blah
  return true;
}

该route参数是ActivatedRouteSnapshot的实例.

以前要获得"下一个"URL我只是从它获得它route.url.只要没有儿童路线,这种方法就可以了.

我的示例URL是/search/advanced?query_hash=1221d3b57f5616ee16ce70fdc78907ab,其中advanced是a的子路由search.

可以找到子路由route.children,但迭代这些子路径(特别是可能有多个级别),并且这种方式组合URL似乎很尴尬和丑陋.

我感兴趣的是包含在route._routerState.url属性中(是一个字符串,位于下图中的底部),但它是一个"私有"变量.

我错过了什么吗？如何才能优雅地从中获取完整的(带有儿童路径)网址ActivatedRouteSnapshot？Angular版本是5.1.

我有一点泡菜.我正在使用Route guard(实现CanActivate接口)来检查用户是否被授予访问特定路由的权限:

const routes: Routes = [
    {
        path: '',
        component: DashboardViewComponent
    },
    {
        path: 'login',
        component: LoginViewComponent
    },
    {
        path: 'protected/foo',
        component: FooViewComponent,
        data: {allowAccessTo: ['Administrator']},
        canActivate: [RouteGuard]
    },
    {
        path: '**',
        component: ErrorNotFoundViewComponent
    }
];

现在它可以很好地保护'/ protected/foo'路由不被激活,但我想告诉用户他试图访问的路由是禁止的(类似于你可能从服务器获得的403 Forbidden).

问题: 如何向用户显示此特殊错误视图,而不将其重定向到错误路径哪个接缝是我找到的众多来源的首选选项？ 而且如何在RouteGuard没有实际加载禁止路线的情况下仍然使用我,因为如果我检查我的内部访问FooViewComponent并显示不同的视图它首先会失败点RouteGuard.

理想情况下,我想让我RouteGuard不仅在canActivate()方法中返回false ,而且还完全用say替换组件ErrorForbiddenViewComponent.但我不知道该怎么做,或者事件是否可能.任何替代品？

这就是我的护卫队现在的样子:

import {Injectable} from '@angular/core';
import {Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
import {AuthService} from '../services/auth.service';

@Injectable()
export …

在Ionic 3中,您可以使用navController的第二个参数将数据传递到下一页并使用navParams服务检索它.

这是一个非常方便的功能.在Ionic 4中是否有等效的路由api？

你总是可以JSON.stringify对象/数组到routerParams,这在我看来不太方便.

在Ionic 4中,您可以使用ComponentProps和@Input()通过modalController传递数据,使其更适合快速推送/弹出实现.

编辑

我对这个问题的意图是找出是否有来自Angular 6+或Ionic 4+的原生API.我很清楚如何实现自定义服务或解析器来实现此目的.

目标是充分利用离子和角度的api,因为在较大的项目中,每个自定义代码都需要文档并增加复杂性.