标签: angular2-router3

我知道我可以将参数传递routerLink给路由,例如

/user/:id

通过写作

[routerLink]="['/user', user.id]"

但是这个路线怎么样:

/user/:id/details

有没有办法设置此参数或我应该考虑不同的URL方案？

我正在将正在处理的应用程序升级到最新的Angular 2候选版本.作为这项工作的一部分,我试图使用NgModule规范并将我的应用程序的所有部分迁移到模块.在大多数情况下,除了路由问题之外,这已经非常顺利.

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",

我的应用程序是作为模块的组合构建的,其中几个模块粘合在一起作为父模块的子项.例如,我有一个管理模块,它包含通知模块,用户模块和电话模块(例如).这些模块的路径应该像......

/admin/notifications/my-notifications
/admin/users/new-user
/admin/telephony/whatever

在路由器的早期版本中,使用"children"很容易实现

export const AdminRoutes: RouterConfig = [
   {
      path: "Admin",
      component: AdminComponent,
      Children: [
         ...UserRoutes,
         ...TelephonyRoutes,
         ...NotificationRoutes
      ]
   }
]

在另一个文件中,作为子模块的一部分,我也定义了各个模块路由

export const UserRoutes: RouterConfig = [
    {
       path: "users",
       component: userComponent,
       children: [
           {path: "new-user", component: newUserComponent}
       ]
    }

]

这一切都很有效.在升级到模块的过程中,我将所有内容都移动到了各自的路由文件中,所以现在这两个看起来更像是这样

const AdminRoutes: Routes = [
    {path: "admin", component: AdminComponent}
] 

export const adminRouting = RouterModule.forChild(AdminRoutes)

和 …

我发现许多ActivatedRouteObservables喜欢params或url订阅但未取消订阅的例子.

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params
    // (+) converts string 'id' to a number
    .switchMap((params: Params) => this.service.getHero(+params['id']))
    .subscribe((hero: Hero) => this.hero = hero);
}

• 路径对象和订阅是否自动销毁并为每个组件创建新创建？
• 我是否必须关心取消订阅Observable？
• 如果没有,你能解释一下ActivatedRoute对象树会发生什么Router.routerState？

我最近更新到新的RC3和Router3alpha,似乎有些事情发生了变化.

我注意到单击活动路径的链接不再导致重新加载组件.如何使用新的router3实现此行为？

我的链接看起来像

<a [routerLink]="['/link1']">Link1</a>

为了测试我只是在ngOnInit中使用了一个随机数:

export class LinkoneComponent implements OnInit 
{

    public foo: number;
    constructor() {}

    ngOnInit() 
    {
        this.foo = Math.floor(Math.random() * 100) + 1;
    }

}

在路由之间切换时它可以正常工作,但是单击当前活动的路由不会导致组件的重新加载.

尝试切换到新的路由器,如版本"@ angular/router":"3.0.0-beta.2"与"@ angular/*":"2.0.0-rc.4"组合,遵循官方文档ComponentRouter.

但是,当我尝试使用默认的HomeComponent加载我的应用程序时,我遇到了一个问题:

Cannot find primary outlet to load 'HomeComponent'

这似乎与使用templateUrl和外部html文件而不是使用内联模板样式有关.

HomeComponent最初未显示在Window中,错误将打印到控制台.但是,当我使用Home Component的链接时,它会显示为秒针.

我一改变

templateUrl: 'home.html'

至

template: '<router-outlet></router-outlet>'

错误消失,HomeComponent显示,路由按预期工作.

这是一个已知问题吗？它对使用templateUrl的人有用吗？为了让它发挥作用,有什么我必须尊重的吗？

升级到Angular 2 RC5(来自RC4)后,我似乎无法再注入ActivatedRoute我的组件.

原始例外:没有ActivatedRoute的提供商!

这是相关的代码:

import { Component } from '@angular/core';

import { 
  ActivatedRoute
} from '@angular/router';

declare var module: {
  id: string;
};

@Component({
  moduleId: module.id,
  selector: 'mds-app',
  templateUrl: 'app.component.html',
  styleUrls: [
      'app.component.css'
  ],
  directives: []
})
export class AppComponent { 

  constructor(private _route: ActivatedRoute) {
    this._route.params.subscribe(params => console.log(_route));
  }
}

这是我的app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule }  from '@angular/common';
import { Routes, RouterModule }  from …

比方说,我们有两个途径Dashboard和Profile.Dashboard有动态标签功能Google spreadsheet.我想做一些交互(构建图表,可视化一些数据)创建标签Dashboard.现在,如果我路由到Profile然后路由回去Dashboard,我想看看之前在那些标签中的内容Dashboard.这意味着,我想在客户端保持状态.AFAIK在组件之间进行路由时,会重新创建组件.是否可以在使用角度2路由时制作类似应用程序的电子表格？我需要使用路由,因为在我的应用程序中我必须使用LazyLoading功能.

那么这个想法应该是什么？我是角度2的新手.

我正在尝试找到一种方法来处理设置Angular2 Typescript路由(使用3.0.0-alpha.8路由器),该路由将处理以散列片段开头的路由.

我正在处理的应用程序通过带有oauth2的rails后端处理所有外部登录(我无法控制的东西).将用户重定向到外部登录页面工作正常但是当重定向URL时,总是某种形式http://localhost:4200#access_token=TOKEN(其中TOKEN是一系列数字和字母)被发回但我无法弄清楚如何设置可以处理#签署所以我可以抓住它并重定向到适当的组件.

在以前的Angular1应用程序中ui-router,能够使用以下路线:

.state('accessToken', {
  url: '/access_token=:token',
  controller: 'LoginController',
  params: { token: null }
})

并且接受发送回的重定向url没有问题,然后将所有内容传递给LoginController以处理前端的其余身份验证/令牌业务.

然而,这个应用程序是Angular2和Typescript,路由器查询参数似乎不那么灵活,我在实现类似的解决方案时遇到了麻烦.我一直在基于文档中的这一部分,但所有的例子都是建立其他东西,/heroes在进入查询参数的复杂部分之前,例如/heroes/:id.我也搜索了stackoverflow,并且无法找到任何可以使用Angular2和Typescript以及当前路由器的东西.

这是我目前的(非工作)解决方案:

import { provideRouter, RouterConfig } from '@angular/router';

import { HomeComponent } from './components/home/home.component';
import { TestComponent } from './components/test/test.component';


export const appRoutes: RouterConfig = [
  {
    path: '',
    component: HomeComponent,
    terminal: true
  },
  {
    path: 'access_token',
    component: TestComponent
  }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(appRoutes)
];

如果我拿回发送回的重定向网址并将其修改(纯粹用于测试目的)http://localhost:4200/access_token=TOKEN …

我已经设置了我的应用程序,以便我有一个Recipe Book列表Recipies,当我点击一个食谱然后它显示Recipe Details在嵌套路线中.然后它还有一个按钮,当点击时加载嵌套路线中的成分Recipes Details.

到目前为止,路由似乎有效,除非我尝试导航到另一个Recipe.如果Ingredients托盘(路线)处于活动状态,则它将更改配方并折叠Ingredients路线,如果我然后尝试导航(不打开配料),我会收到以下错误:

Uncaught (in promise): Error: Outlet is not activated
Error: Outlet is not activated

看起来我路由器需要Ingredients处于活动状态,否则它无法理解嵌套路由.这是我的看法,但不知道如何解决它或当我出错.

单食谱书,page.component.html

<app-tray class="recipe-list">
    <app-recipe-list [recipe]="recipe"></app-recipe-list>
</app-tray>
<router-outlet></router-outlet>

偏方detail.component.html

<app-tray class="recipe">
    The routing has worked and loaded recipe.
</app-tray>
<router-outlet></router-outlet>

配料,list.component.html

<app-tray class="ingredients-list">
    Recipe Ingredients have loaded.
</app-tray>

app.routes.ts(更新)

export const routerConfig : Route[] = [
  {
    path: 'recipe-books',
    children: [
      {
        path: ':id', component: …

我正在使用Angular2进行路由,我的页面在初始加载时显示重复的内容.一旦我点击任何链接(Page1或Page2)一切都很完美(没有更多的重复内容).为什么我在初始加载时获得重复内容,我需要将其显示一次

屏幕截图

的index.html

<html>
<head>
    <base href="/">
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>
<!-- 3. Display the application -->
<body>
    <my-app>
        Loading...
    </my-app>

</body>
</html>

App.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule …