标签: angular-routing

我有一个使用伟大的ui路由器的Angular应用程序.

我的设置如下:

.config( function ($stateProvider, $urlRouterProvider) {

    $stateProvider

    // PROJECT DETAIL
    .state('project', {
        url: '/project/:projectId/',
        resolve: {
            /* some base api calls */
        },
        views: {
            'task-list': {
                templateUrl: 'partials/task_list.tmpl.html',
                controller: 'TaskListCtrl',
                resolve: {
                    tasks: function ($stateParams, ConcernService) {
                        return ConcernService.get('project-tasks/', $stateParams.projectId);
                    },
                }
            },
            'concern-instance': {
                /* some resolved variables */
            }
        }
    })
    .state('project.task', {
        url: 'task/:taskId/',
        views: {
            'concern-instance@': {
                /* some different resolved variables */
            },
        }
    })

这一切都像黄油一样.然而,在我的task_list模板时,状态project.task,我希望能够访问taskIdPARAM,所以我可以强调积极的导航链接,即使网址为#/project/123/task/456/ …

我一直在寻找获得当前路线路径名的好方法.这是我能找到的最容易的.

this.route.snapshot.firstChild.url[0].path

有没有更好的办法？谢谢!

我的Angular应用程序模块有以下路由路径:

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: 'documents',
                data: { myObject: MyConstants.OPTION_ONE },
                children: [
                    {
                        path: ':ID_DOC',
                        children: [
                            { path: 'edit', component: EditDocumentComponent },
                            { path: '', component: DocumentDetailsComponent },
                        ]
                    },
                    { path: 'add', component: AddDocumentComponent },
                    { path: '', component: DocumentsListComponent }
                ]
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})

export class DocumentsManagementRoutingModule {
}

正如您所看到的,我使用dataproperty将一些数据传递给"documents"中的每个路径,因此我可以从路由路径中声明的任何组件中获取它:

例如,以下是我如何获取数据DocumentDetailsComponent:

export class DocumentDetailsComponent implements OnDestroy {
    private obsData: Subscription;
    private option: any;

    constructor(private route: …

让我们假设我有3个网址: /:projectId/info, /:projectId/users, /:projectId/users/:userId/profile.所有这些都有参数projectId.UI有一个组件可以从一个项目切换到另一个项目.所以我需要:

1. 获取当前网址
2. 按名称更改参数(例如projectId)
3. 导航到新网址

所以我需要一些类似的this.router.replaceParam(currentUrl, {projectId: 'project_id_2'})内容将转换/project_id_1/users/user_id_1/profile为/project_id_2/users/user_id_1/profile(以及任何其他带有:projectIdparam的URL )

我认为这是一个简单而常见的问题,但在1小时内没有找到解决方案.此处建议的解决方案不起作用,如上一条评论中所述

我正在努力使用Angular框架来使我的应用程序顺利运行,但我无法解决路由问题.我有一个顶级,AppComponent并app-routing.module.ts通过我的自定义管理导航SlideMenuComponent.我简化的html模板AppComponent:

<app-slide-menu [buttons]="menuButtons"></app-slide-menu>
<router-outlet></router-outlet>

我SlideMenuComponent的以下html为核心:

<nav><div *ngFor="let button of buttons">
    <a routerLink="{{button.routerLink}}"
    >{{button.name}}</a>
</div></nav>

用户可以导航'/courses'到此幻灯片菜单,该菜单由CoursesComponent分页指向由指向CourseComponent服务器检索的特定s的链接监督.这些组件位于各自的courses.module.ts模块中courses-routing.module.ts.但是,当我点击任何这些链接时,我会收到Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?控制台警告,ngOnInit()不会被打开CourseCompontent,并且它不会更新,直到我点击页面上的任何按钮.我router.navigate()通过转发此任务解决了手动导航时出现此问题NgZone.runTask(router.navigate()),但为什么会发生anchor标签和routerLinkdirecrives？这是我的CoursesComponent代码摘录:

<nav><ul>
        <li *ngFor="let course of api.data | paginate: {
            currentPage: currentPage, itemsPerPage: limit, totalItems: api.total
        }">
           <a
               [routerLink]="course._id"
               [queryParams]="{ …

编辑:基于@ actor2019的回答我想更新我的问题以更好地解释问题:

使用Angular UI-Router(v0.0.2),我设置应用程序以在主要"页面"/状态之间正确导航,同时继承基本状态.

index.html的:

<div ui-view></div>

base.html文件:

<!-- Header -->
<div>
    <!-- Header markup -->

    <!-- Search View -->
    <div ui-view="search"></div>
</div>

<!-- Page Content view -->
<div ui-view></div>

问题出在app.js文件中.当我将views参数添加到base状态时,一切都停止工作(100%空白页).没有该参数,页面呈现正确,但我没有搜索视图.

app.js:

$urlRouterProvider.otherwise('/');

//
// Now set up the states
$stateProvider
  .state('base', {
    abstract: true,
    templateUrl: 'views/base.html',
    views: {
      "search": {
        templateUrl: "views/search.html"
      }
    }
  })
  .state('base.home', {
    url: "/",
    templateUrl: "views/home.html"
  })
  .state('base.page2', {
    url: "/page2",
    templateUrl: "views/page2.html"
  });

如何向此父级"基础"状态添加视图？

更新: @ …

我正在使用$ routeProvider和$ locationProvider在单页面应用程序(SPA)中处理pushstate URLS,如下所示:

angular.module('pets', [])

  .config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when('/pet/:petId', {
      controller: 'petController'
    });
  })

  .controller('petController', function($scope, petService, $routeParams){
    petService.get('/api/pets/' + $routeParams.petId).success(function(data) {
      $scope.pet = data;
    });
  });

URL用于从服务器提取可能存在或不存在的内容.

如果这是一个普通的多页面网站,对丢失内容的请求将触发来自服务器的404标头响应,并且对移动内容的请求将触发301.这将提醒谷歌丢失或移动的内容.

比方说,我点击了这样一个URL:

http://example.com/pet/123456

并且说数据库中没有这样的宠物,我的SPA如何在该内容上返回404.

如果没有这个,是否有其他方法可以正确地提醒用户或搜索引擎所请求的URL不存在？还有其他一些我不考虑的解决方案吗？

下面是我的app.js文件

angular
  .module('repoApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.bootstrap',
    'ui.router'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .when('/login', {
        templateUrl: 'views/loginPage.html',
        controller: 'loginCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });
angular
  .module('loginState',['ui.router']);

以下是我的州档案

angular
  .module('repoApp')
  .config(function ($stateProvider) {

      $stateProvider.state('home1', {
        url:'/home1',
        templateUrl: 'views/modals/test.html'
      })
      .state('secondState',{
        url:'/secondState',
        templateUrl: 'views/modals/secondStateTest.html'
      });
  });

问题是,使用我的html导航到登录页面.

<ul class="nav navbar-nav">
              <li class="active"><a href="#/">Home</a></li>
              <li><a ng-href="#/about">About</a></li>
              <li><a ng-href="#/">Contact</a></li>
              <li class="loginShift"><a ng-href="#/login">Login</a></li>
            </ul> …

我正在尝试使用子路由进行简单的应用程序.

当我在我的子组件上设置路由时,我收到以下错误消息:

Link "["ChildItem"]" does not resolve to a terminal instruction

如果我将所有路由放在父组件上它可以正常工作.如果我拆分子组件和父组件之间的路由,我会得到上述错误.

这是它在同一组件上的所有路由:

import {bootstrap} from 'angular2/platform/browser';
import {Component, provide} from 'angular2/core';
import {COMMON_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES, NgFor, NgIf} from 'angular2/common';
import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouterLink, RouterOutlet, Route, LocationStrategy, HashLocationStrategy} from 'angular2/router';


@Component({selector: 'subItem1',template: `SubItem1`})export class SubItem1{}
@Component({selector: 'subItem2',template: `SubItem2`})export class SubItem2{}
@Component({selector: 'subItem3',template: `SubItem3`})export class SubItem3{}

@Component({
    selector: 'childItem',
    directives: [COMMON_DIRECTIVES, CORE_DIRECTIVES, ROUTER_DIRECTIVES, RouterLink],
    template: `<h2>Child Item</h2>
    <ul>
    <li><a [routerLink]="['/SubItem1']">SubItem1</a></li>
    <li><a [routerLink]="['/SubItem2']">SubItem2</a></li>
    <li><a [routerLink]="['/SubItem3']">SubItem3</a></li>
    </ul>
    `
})  
export class ChildItem{} …

我希望通过子路径显示不同的视图.例如,我希望我的模板能够容纳多个路由器插座

Version: @angular/router": "3.0.0-alpha.7"

<router-outlet></router-outlet>
<router-outlet name="route1"></router-outlet>
<router-outlet name="route2"></router-outlet>

在我的路由器中,我想指定路由器的名称.

正如我在一个问题中看到的,解决方法是指定AuxRoute,但此版本中不存在AuxRoute.

{path: '/',        component: HomeComponent, as: 'Home'},
new AuxRoute({path: '/route1', component: Route1Component, as: 'Route1'}),
new AuxRoute({path: '/route2', component: Route2Component, as: 'Route2'})

虽然在角度2官方网站上我发现它可能有多个路由器,但我找不到任何资源.

https://angular.io/docs/ts/latest/guide/router.html

A template may hold exactly one unnamed <router-outlet>. The router supports multiple named outlets, a feature we'll cover in future.