标签: angular2-routing

错误

我在我的应用程序中实现了嵌套路由.当应用程序在登录后加载其显示登录屏幕时,其重定向到管理页面,其中存在更多子路由,如user,product,api等.现在,当我导航到admin时,byddefault加载用户屏幕但进一步<routeLinks>无法工作,它显示此错误. Error: Uncaught (in promise): Error: Cannot match any routes: 'product'

点击产品后,它显示了这一点

代码main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from '../app/app.routes';
import { AppComponent } from '../app/app.component';

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

app.component

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

@Component({
  selector: 'demo-app',
  template: `

    <div class="outer-outlet">
      <router-outlet></router-outlet>
    </div>
  `,
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

app.routes

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

import { AboutComponent, AboutHomeComponent, AboutItemComponent …

我正在将正在处理的应用程序升级到最新的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)

和 …

路线

const appRoutes: Routes = [
    { path: '', redirectTo: '/companies/unionbank', pathMatch: 'full'},
    { path: 'companies/:bank', component: BanksComponent },
    { path: '**', redirectTo: '/companies/unionbank' }
]

零件

const NAVBAR = [
    { 
        name: 'Banks',
        submenu: [
            { routelink: '/companies/unionbank', name: 'Union Bank' },
            { routelink: '/companies/metrobank', name: 'Metro Bank' },
            { routelink: '/companies/bdo', name: 'BDO' },
            { routelink: '/companies/chinabank', name: 'China Bank' },
        ]
    },
    ...
]

链接示例: http://localhost:8099/#/companies/bdo

我想 在上面的示例链接中获取String bdo.

我知道我可以通过使用window.location.href获取链接并拆分成数组.所以,我可以得到最后一个参数,但我想知道是否有一个正确的方法以角度方式这样做.

任何帮助,将不胜感激.谢谢

在我的routable component我

@RouteConfig {
  {path: '/login',   name: 'Login', component: LoginComponent}
}  

但是,如果我去,如何获得查询参数app_url/login?token=1234？

我有一个带角度前端的mvc 5项目.我想按照本教程https://angular.io/guide/router中的说明添加路由.所以在我的_Layout.cshtml中我添加了一个

<base href="/">

并在我的app.module中创建了我的路由.但是当我运行这个时,我收到以下错误:

Error: Template parse errors:
    'router-outlet' is not a known element:
    1. If 'router-outlet' is an Angular component, then verify that it is part       of this module.
    2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA'   to the '@NgModule.schemas' of this component to suppress this message. ("
    <a routerLink="/dashboard">dashboard</a>
    </nav>
    [ERROR ->]<router-outlet></router-outlet>
     "): ng:///AppModule/AppComponent.html@5:0

在我的app.component中

<router-outlet></router-outlet>

给出一个错误,告诉我Visual Studio无法解析标签'router-outlet'.有任何建议我如何解决这个错误？我错过了参考或导入或只是忽略了什么？

下面是我的package.json,app.component和app.module

的package.json

{
  "version": "1.0.0",
  "name": "app",
  "private": true,
  "scripts": {},
  "dependencies": {
    "@angular/common": "^4.2.2", …

是否有可能通过多种途径PARAMS比如像下面需要传递id1和id2到component B

@RouteConfig([
    {path: '/component/:id :id2',name: 'MyCompB', component:MyCompB }
])
export class MyCompA {
  onClick(){
    this._router.navigate( ['MyCompB', {id: "someId", id2: "another ID"}]);
     }
}

如何在Angular 2路由器中监听状态变化？

在Angular 1.x中我使用了这个事件:

$rootScope.$on('$stateChangeStart',
    function(event,toState,toParams,fromState,fromParams, options){ ... })

所以,如果我在Angular 2中使用这个eventlistener:

window.addEventListener("hashchange", () => {return console.log('ok')}, false);

它不是返回'ok',然后从JS更改状态,然后才运行浏览器history.back()函数.

使用router.subscribe()函数作为服务:

import {Injectable} from 'angular2/core';
import {Router} from 'angular2/router';

@Injectable()
export class SubscribeService {
    constructor (private _router: Router) {
        this._router.subscribe(val => {
            console.info(val, '<-- subscribe func');
        })
    }
}

在路由中初始化的组件中注入服务:

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';

@Component({
    selector: 'main',
    templateUrl: '../templates/main.html',
    providers: [SubscribeService]
})
export class MainComponent {
    constructor (private subscribeService: SubscribeService) {}
}

我将此服务注入其他组件,例如本例中.然后我改变状态,console.info()在服务中不起作用.

我做错了什么？

我正在尝试使用Angular2路由器防护来限制对我的应用程序中某些页面的访问.我正在使用Firebase身份验证.为了检查用户是否使用Firebase登录,我必须使用回调调用.subscribe()该FirebaseAuth对象.这是守卫的代码:

import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AngularFireAuth } from "angularfire2/angularfire2";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Rx";

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private auth: AngularFireAuth, private router: Router) {}

    canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean>|boolean {
        this.auth.subscribe((auth) => {
            if (auth) {
                console.log('authenticated');
                return true;
            }
            console.log('not authenticated');
            this.router.navigateByUrl('/login');
            return false;
        });
    }
}

当导航到对其具有防护的页面时authenticated,或者not authenticated打印到控制台(在等待来自firebase的响应的一些延迟之后).但是,导航永远不会完成.此外,如果我没有登录,我将被重定向到该/login路线.因此,我遇到的问题是return true不向用户显示请求的页面.我假设这是因为我正在使用回调,但我无法弄清楚如何做到这一点.有什么想法吗？

我写了一个使用路由器的Angular2(v2.0.1)应用程序.该网站加载了几个查询字符串参数,因此完整的URL最初看起来像这样:

https://my.application.com/?param1=val1&param2=val2&param3=val3

在我的路由配置中,我有一个重定向空路由的条目:

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/comp1',
        pathMatch: 'full'
    },
    {
        path: 'comp1',
        component: FirstComponent
    },
    {
        path: 'comp2',
        component: SecondComponent
    }
];

我的问题是,在应用程序被引导后,URL不再包含查询参数,而是看起来像这样:

https://my.application.com/comp1

有没有什么办法可以配置路由器,以便在导航时保留初始查询字符串？

谢谢
Lukas

我试图用angular 2 final测试我的组件,但是我得到一个错误,因为组件使用了该routerLink指令.我收到以下错误:

无法绑定到'routerLink',因为它不是'a'的已知属性.

这是ListComponent模板的相关代码

<a 
  *ngFor="let item of data.list" 
  class="box"
  routerLink="/settings/{{collectionName}}/edit/{{item._id}}">

这是我的考验.

import { TestBed } from '@angular/core/testing';

import { ListComponent } from './list.component';
import { defaultData, collectionName } from '../../config';
import { initialState } from '../../reducers/reducer';


const data = {
  sort: initialState.sort,
  list: [defaultData, defaultData],
};

describe(`${collectionName} ListComponent`, () => {
  let fixture;
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        ListComponent,
      ],
    }).compileComponents(); // compile template and css;
    fixture = TestBed.createComponent(ListComponent);
    fixture.componentInstance.data = data;
    fixture.detectChanges(); …