标签: angular2-routing

将ActivatedRouteSnapshot注入组件不起作用(也没有注入ActivatedRoute).这里的堆栈跟踪:

"Error: Can't resolve all parameters for ActivatedRouteSnapshot: (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?).
at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:7042:33)
at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:73735:16)
at new SyntaxError (http://localhost:4200/vendor.bundle.js:6140:16)
at CompileMetadataResolver._getDependenciesMetadata (http://localhost:4200/vendor.bundle.js:19345:31)
at CompileMetadataResolver._getTypeMetadata (http://localhost:4200/vendor.bundle.js:19220:26)
at CompileMetadataResolver._getInjectableMetadata (http://localhost:4200/vendor.bundle.js:19208:21)
at CompileMetadataResolver.getProviderMetadata (http://localhost:4200/vendor.bundle.js:19450:40)
at http://localhost:4200/vendor.bundle.js:19408:49
at Array.forEach (native)
at CompileMetadataResolver._getProvidersMetadata (http://localhost:4200/vendor.bundle.js:19375:19)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:4200/vendor.bundle.js:18848:30)
at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:4200/vendor.bundle.js:18736:23)
at http://localhost:4200/vendor.bundle.js:18937:54
at Array.forEach (native)
at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://localhost:4200/vendor.bundle.js:18936:41)"

在组件中,ActivatedRouteSnapshot注入如下:

constructor([...], private router: Router,
          private route: ActivatedRouteSnapshot) {
    [...]
}

ActivatedRouteSnapshot提供于app.component.ts:

@Component({ …

我已经开始编写一个新的角度2项目,我发现我安装了2个角度路由器:

1. "@angular/router": "2.0.0-rc.1",
2. "@angular/router-deprecated": "2.0.0-rc.1",

我没有在角度网站上找到如何使用新路由器.例如,我需要导入哪个组件.

所以我的问题是:

1. 我应该用router-deprecated吗？
2. 有没有关于如何使用新路由器的好文档？

我将开发一个简单的Angular 2应用程序.我使用Angular CLI创建了一个带路由的项目,并使用'ng generate component'命令向应用添加了几个组件.然后我在app-routing.module.ts中指定了路由,如下所示.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { UserComponent } from './user/user.component';
import { ErrorComponent } from './error/error.component';
import { SpecialpageComponent } from './specialpage/specialpage.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
    {
    path: 'user',
    component: UserComponent
  },
  {
    path: 'specialpage',
    component: SpecialpageComponent
  },
  { …

我正在研究这个angular2项目,我用它ROUTER_DIRECTIVES来从一个组件导航到另一个组件.

有2个组件.即PagesComponent&DesignerComponent.

我想从PagesComponent导航到DesignerComponent.

到目前为止它的路由正确但我需要传递pageObject,因此设计人员可以加载该页面对象本身.

我尝试使用RouteParams但它获取页面对象undefined.

下面是我的代码:

pages.component.ts

import {Component, OnInit ,Input} from 'angular2/core';
import { GlobalObjectsService} from './../../shared/services/global/global.objects.service';
import { ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
import { DesignerComponent } from './../../designer/designer.component';
import {RouteParams} from 'angular2/router';

@Component({
    selector: 'pages',    
    directives:[ROUTER_DIRECTIVES,],
    templateUrl: 'app/project-manager/pages/pages.component.html'
})
@RouteConfig([
  { path: '/',name: 'Designer',component: DesignerComponent }      
])

export class PagesComponent implements OnInit {
@Input() pages:any;
public selectedWorkspace:any;    
constructor(private globalObjectsService:GlobalObjectsService) {
    this.selectedWorkspace=this.globalObjectsService.selectedWorkspace;                    
}
ngOnInit() { }   
}

在html中,我正在做以下事情: …

我有一个Angular 2 rc-2应用程序,实现了基本路由.路径是/path1默认路径和/path2.主路径/重定向到/path1.当我在本地运行它(lite-server)时一切正常.我设法将此应用程序部署到Azure Web应用程序.该应用程序工作正常,但如果我在我进入时刷新页面/path1或/path2我收到此错误:The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

一种可能的方法是实现url重写.我在项目中添加了一个web.config文件

<?xml version="1.0" encoding="UTF-8"?>

<configuration>
    <system.webServer>
        <rewrite>
        <rules>
        <clear />

         <!-- check if its path1 url and navigate to default page -->
        <rule name="Path1 Request" enabled="true" stopProcessing="true">
        <match url="^path1" />
        <action type="Redirect" url="/index.html" logRewrittenUrl="true" />
        </rule>

         <!-- check if its path2 url and navigate to default page …

在同一个Angular2应用程序中使用两个完全不同的布局的最佳实践方法是什么？例如,在我的/登录路线中,我想要一个非常简单的水平和垂直居中的框,对于每一个其他路线,我想要我的完整模板与标题,内容和页脚.

如何更换历史而不是在角度2的新路由器(rc.1)中推新？

例如,我在一个问题列表中(/questions)在新路线()中打开一个新模态/questions/add,并在添加一个新问题后,我转到问题视图(/questions/1).如果我按回去,我想/questions转而去/questions/add

我正在将我的Angular2应用程序从2.0.0升级到2.3.0,我遇到了以下错误.任何想法为什么？我看到了另一篇文章(Angular 2.0.1 Router EmptyError:序列中没有元素),但在尝试之后,问题仍然存在.是什么导致这个错误？

Error: Uncaught (in promise): EmptyError: no elements in sequence
Error: no elements in sequence
    at EmptyError.ZoneAwareError (zone.js:672)
    at new EmptyError (EmptyError.ts:13)
    at FirstSubscriber._complete (first.ts:161)
    at FirstSubscriber.Subscriber.complete (Subscriber.ts:122)
    at Subject._subscribe (Subject.ts:109)
    at Subject.Observable.subscribe (Observable.ts:98)
    at Observable._subscribe (Observable.ts:158)
    at Observable.subscribe (Observable.ts:98)
    at Observable._subscribe (Observable.ts:158)
    at FirstOperator.call (first.ts:82)
    at Observable.subscribe (Observable.ts:96)
    at Object.subscribeToResult (subscribeToResult.ts:32)
    at MergeAllSubscriber._next (mergeAll.ts:82)
    at MergeAllSubscriber.Subscriber.next (Subscriber.ts:95)
    at MapSubscriber._next (map.ts:80)
    at resolvePromise (zone.js:475) [angular]
    at resolvePromise (zone.js:460) [angular]
    at /libs/zone.js/dist/zone.js:509:17 [angular]
    at …

这是我的Angular2应用程序结构:

这是我的代码的一部分.以下是moduleAngular2应用程序的主要内容,它导入其路由规则和子模块(EdgeModule)并使用与某些页面相关的一些组件.

app.module.ts

@NgModule({
    declarations: [
        AppComponent,
        PageNotFoundComponent,
        LoginComponent
    ],
    imports: [
        ...
        appRouting,
        EdgeModule
    ],
    providers: [
        appRoutingProviders,
        LoginService
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

以下是主模块的路由规则.它有登录页面和页面找不到的路径.

app.routing.ts

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: '**', component: PageNotFoundComponent }
];

export const appRoutingProviders: any[] = [];

export const appRouting = RouterModule.forRoot(appRoutes, { useHash: true });

这是EdgeModule声明它使用的组件并导入自己的路由规则和2个子模块(FirstSectionModule和SecondSectionModule).

edge.module.ts

@NgModule({
    declarations: [
        EdgeComponent, …

我有下一个问题:Cannot read property 'outlets' of null.我的项目有效,但一段时间后它停止工作,但我没有改变我的代码.请帮帮我. 使用router-outlet
更新
我的组件:

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

@Component({
  selector: 'app',
  template: '
    <nav-menu></nav-menu>
    <router-outlet></router-outlet>
    <footer-component></footer-component>

',
})
export class AppComponent  {}

app.module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { LocationStrategy, PathLocationStrategy, APP_BASE_HREF } from       '@angular/common';
import { HttpModule } from '@angular/http';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
//+components
@NgModule({
    imports:
    [
        BrowserModule,
        HttpModule,
        FormsModule,
        ReactiveFormsModule,
        RouterModule.forRoot([
            { path: '', …