标签: angular-routing

我有一条注册了一些数据的路线:

const routes: Routes = 
[
    {path: 'my-route', data: { title: 'MyTitle' }, component: MyComponent},
];

我正在尝试使用以下方法访问路线的数据ActivatedRoute:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({...})
export class MyComponent implements OnInit {
  private routeData;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.routeData = this.route.data.subscribe((data) => {
      console.log(data); // this is returning an empty object {}
    });
  }
}

但由于某些原因,这data是一个空洞的对象.

如何解决这个问题呢？

我正在检查角度路由.

http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

我看到的例子中所有路由都在同一个文件中定义.如何在不同的文件/模块中定义各种路由？

我有一个当前的401检查,我正在使用$ location运行正常.但是我想将它交换到$ state并使用ui-router代替.当我这样做时,我得到一个错误代码:

Circular dependency found: $http <- $templateFactory <- $view <- $state <- authHttpResponseInterceptor <- $http <- $compile

当我检查某些路径并且不允许登录用户查看它时,我当前的代码看起来很好:

  /* Look for 401 auth errors and then redirect */
  .factory('authHttpResponseInterceptor',['$q','$location', function($q,$location) {

      return {
          response: function(response){
              if (response.status === 401) {
              }

              return response || $q.when(response);
          },
          responseError: function(rejection) {
              var reservedPaths = ['/','/login','/connect','/event'];
              if (rejection.status === 401 && _.contains(reservedPaths,$location.path().trim())) {
                  $location.path('/welcome');

              }
              return $q.reject(rejection);
          }
      };
  }])
  .config(['$httpProvider',function($httpProvider) {
      //Http Intercpetor to check auth failures for xhr requests …

自从我开始研究这个问题已经有好几个小时了,我似乎无法理解解决方案.

我有一个应用程序,可能会导致用户实际输入URL.在这种情况下,不难相信用户可能会输入尾部斜杠.例如,

www.example.com/users/2和www.example.com/edit/company/123

应该像对待一样对待

www.example.com/users/2/和www.example.com/edit/company/123/

这只需要在客户端处理URL路由.我对处理资源/ API调用中的尾部斜杠不感兴趣.我只对处理浏览器中的尾随处理感兴趣.

所以我研究并发现网上的答案不多.他们中的大多数人都把我带到了angular-ui路由器的FAQ部分.

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

在这里,他们告诉我们写一条规则,这是我想要做的,但它似乎没有起作用,或者我做错了.

这是我添加代码的plunkr.

http://plnkr.co/edit/fD9q7L?p=preview

我已将此添加到我的配置中,其余代码几乎是基本的东西.

$urlRouterProvider.rule(function($injector, $location) {
  //if last charcter is a slash, return the same url without the slash
  if($location.$$url[length-1] === '/') {
    return $location.$$url.substr(0,$location.$$url.length - 2);
  } else {
    //if the last char is not a trailing slash, do nothing
    return $location.$$url;
  }
});

基本上,我想使尾随斜杠可选,即它在地址栏上的存在与否应该对加载的状态没有影响.

将Angular Cli升级到1.3.1我现在有一些警告

WARNING in Circular dependency detected: src\app\work-sessions\work-session-list\work-session-list.routing.ts
-> src\app\work-sessions\work-session-list\index.ts -> src\app\work
-sessions\work-session-list\work-session-list.routing.ts

每个类都有这样的结构:

工作会话list.routing.ts

import { Route } from '@angular/router';
import { WorkSessionListComponent } from './index';

export const WorkSessionRoutes: Route[] = [
  {
    path: '',
    component: WorkSessionListComponent
  },
];

Index.ts

export * from './work-session-list.component';
export * from './work-session-list.routing';

工作会议,list.module.ts

import { WorkSessionListComponent } from './work-session-list.component';
import { WorkSessionRoutes } from './work-session-list.routing';
import { DataTableModule } from 'primeng/primeng';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; …

我正在从Angular 4.0.0升级到Angular 5.2.6

我正面临一些问题,让懒惰的模块加载工作.

使用角4.0.0,它工作正常,但现在,5.2.6,我点击我的重定向按钮时出现这样的错误:

core.js:1448 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:27), <anonymous>:13:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:27), <anonymous>:13:34) …

在以前版本的Angular服务工作者实现中,其中一个配置选项是"routing".这可以从这个未解决的SO问题中看出,在这个Angular CLI问题中被引用,最好的剩余文档似乎是Stephen Fluin(Angular团队)的博客文章,以及Alex Rickabaugh 的I/O演讲(来自谷歌).

使用Angular 5,ServiceWorkerModule已经很好地构建了,现在可以使用该ngsw-config.json文件处理大部分配置.但是,在angular.io指南或文档中的任何位置都不再提及如何处理路由的重定向.所以我最终遇到了以下问题:当我访问我的应用程序并离线时,我仍然可以直接访问该应用程序:https://jackkoppa.github.io/cityaq-sw-issue.但是,在加载时,应用程序重定向到search路由,并且大多数用户将尝试从https://jackkoppa.github.io/cityaq-sw-issue/search?cities=Shanghai这样的URL加载(为简单起见,我'我现在只谈论Chrome桌面和移动设备,并在可能的情况下使用Incognito.

当您尝试在离线时访问该URL时,您会立即获得504 - Gateway Timeout.发生这种情况是因为服务工作者只缓存了索引,并且不知道其他路由应该重定向到索引以便它可以加载.我相信Angular服务工作者实现的先前迭代可以通过设置重定向到给定路由的索引来处理这种情况.有没有办法在当前的Angular 5+ ngsw-config.json或生成的ngsw.json文件中处理此重定向？除此之外,如何在单独的服务工作者JS文件中处理变通方法？

我有分离文件路由设置的组件:

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

import { Route } from '../core/route.service';
import { extract } from '../core/i18n.service';
import {CalendarThematicPlanComponent} from './calendar-thematic-plan.component';

const routes: Routes = Route.withShell([
  { path: 'calendar', component: CalendarThematicPlanComponent }
]);

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})

export class CalendarThematicPlanRoutingModule { }

当我输入URL地址时:http://localhost:4200/calendar我被重定向到主页.

如何在Angular 2中跟踪路由？

我使用Angular2 alpha39和Babel来转换ES6 JS文件.我没有使用打字稿.

我创建了一个正确显示的组件.我在模板上添加了一个路由器插座.当我运行应用程序时,我收到错误消息:

没有路由器提供商!(RouterOutlet - >路由器)

调用堆栈是:

以下是代码片段:

模板:

.... // Removed for brevity
<div class="contenttext">
    <router-outlet></router-outlet>
</div>
.... // Removed for brevity

组件文件:

import { Component, View, bootstrap,  OnInit } from 'angular2/angular2';
import { RouteConfig, RouterOutlet, RouterLink } from 'angular2/router';
import 'reflect-metadata';
import 'winjs';

@Component({
    selector: 'dashboard-app'
})
@View({
    templateUrl: '../js/dashboard.html',
    directives: [ ContentComponent, FamiliesComponent, RouterOutlet, RouterLink ]
})
@RouteConfig([ 
    { path: '/employees', component: EmployeesComponent, as: 'employees'} 
]) 
class DashboardAppComponent implements OnInit {
    constructor() …

我在PhoneGap中遇到了ngView的问题.

一切似乎都装得很好,我甚至可以使用ng-controller来使用基本的控制器.但是当我尝试使用ngView进行路由时,没有任何反应.

的index.html

<!doctype html>
<html ng-app>
<head>
    <script type="text/javascript" src="lib/cordova-2.4.0.js"></script> 
    <script type="text/javascript" src="lib/angular-1.0.4.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</head>
<body>

<a href="#/test">Test</a>

<div ng-view></div>

</body>
</html>

app.js

angular.module('App', []).config(function ($routeProvider) {

    $routeProvider.when('/test', {
        controller: TestCtrl,
        template: '<h1> {{ test }} </h1>'        
    });

});

function TestCtrl($scope) {
    $scope.test = "Works!";
}

Eclipse记录器onMessage(onPageFinished, fle:///android_asset/www/index.html#/test)每次单击链接时都会显示,并且在没有#引发错误的情况下尝试它而无法找到路径.

从我在其他地方做好准备,这应该是有效的.任何帮助将不胜感激.