标签: angular2-routing

Angular 2 beta默认使用html5路由.但是,当您转到组件并且路径更改(例如http:// localhost:5000/aboutus)并重新加载/刷新页面时,不会加载任何内容.

这篇文章也提出了这个问题.大多数答案都表示,如果我们要在角度2中进行HTML5路由,那么应该在服务器端处理这个路由问题.这里有更多讨论.

我不知道如何使用asp.net服务器环境来处理这个问题.

任何有角度的2开发人员也使用asp.net并遇到这个问题？

PS.我正在使用ASP.NET 5.我的Angular 2路由正在使用MVC路由.

我正在使用angular2路由器.

要绘制网址的面包屑,请说site.com/a/b/c/15我执行以下操作:

1. 获取路线site.com/a/b/c/15并获得与路线相关联的漂亮名称
2. 获取路线site.com/a/b/c并获得与路线相关联的漂亮名称
3. 获取路线site.com/a/b并获得与路线相关联的漂亮名称
4. 获取路线site.com/a并获得与路线相关联的漂亮名称

所以我想说我有以下路线:

{ path: 'a', component: A, data:{prettyName: 'I am A'}}
{ path: 'b', component: B, data:{prettyName: 'I am B'}},
{ path: 'c', component: C, data:{prettyName: 'I am C'}},

我的过程的结果将是一个包含的数组,{"I am C", "I am B", "I am C"}并且由于我可以显示一个很好的面包屑"I am A > I am B > I am C"来解释当前的路线.

这用于使用路由器弃用的操作

this.router.recognize(url).then((instruction) => {
    instruction.component.routeData.get('prettyName') // Would return 'I am ..'

但是现在; 使用最后一个路由器,我无法再处理这个识别逻辑. …

我是Angular2的新手,我已经习惯了Angular 1摘要周期,这意味着如果我更新视图的范围,我可以通过调用手动触发摘要$scope.$digest().但是,我不确定如何在Angular2中执行此操作,因为新框架没有旧版本具有的隐式数据绑定.

这是我的问题.我有一个路由,当一个带有参数的网址被命中时加载一个组件:

// Router
export const AppRoutes : RouterConfig = [
    {
    path: 'my/:arg/view',
    component: MyComponent  
    }
]

然后我有这个组件:

// Component
export class MyComponent {
    constructor(private route : ActivatedRoute,
      private r : Router) {
    let id = parseInt(this.route.params['value'].id);
    console.log(id);
    // do stuff with id
    }

    reloadWithNewId(id:number) {
        this.r.navigateByUrl('my/' + id + '/view');
    }
}

让我们说我导航到网址/my/1/view.它将调用构造函数并1记录数字.但是,如果我reloadWithNewId使用新的id 调用,reloadWithNewIf(2)则不会再次调用构造函数.如何手动重新加载组件？

app
 |-plugins
       |-plugin1
           |-config.json
           |-plugin1.module.ts
           |-plugin1.component.ts

       |-plugin2
           |-config.json
           |-plugin2.module.ts
           |-plugin2.component.ts

如上所示,我有"app/plugins"文件夹,其中包含插件.每个插件将包含一个"config.json"文件,它将告诉一些配置,包括 -

{
   path: "feature1",
   moduleFile: "feature1.module",
   moduleClassName: "Feature1Module"
}

所以我想要的是,在应用程序引导之前,它将扫描"app/plugins"文件夹并加载所有插件配置,并懒惰地注册所有模块路由.对于上面的例子,路线将是

{
     path: "feature1",
     loadChildren: "app/plugins/plugin1/plugin1.module#Plugin1Module"
}

这样,我们可以将新插件放入插件文件夹并刷新应用程序,我们新删除的插件已启动并运行.

谁知道我怎么能做到这一点？

注意:我在angular2最新(2.1.0)

这是插件. https://plnkr.co/edit/tsNlmRth4mRzz0svGWLK?p=preview

我在其中创建了两个模块,每个模块包含两个组件和一个服务.我希望服务应该是模块级别的单例(保存状态).

如果单击"模块1页面1"和"模块2页面2",它将显示两个不同的随机数.因为我在构造函数中生成此数字.因此,每次页面更改时都会创建服务.但是module2的表现非常完美.

注意:Mode1Module正在使用loadChildren Mode2Modulechildren

我发现这个相同类型的问题早先已根据此angular2 rc5路由器服务单例修复

但我认为它仍然存在.所以请帮我解决这个问题.

我正在尝试将旧网址(电子邮件模板中的链接)从以前的网站重定向到另一条路线,如下所示:

if (route.url.indexOf('/#/') !== -1) {
    this.router.navigate(['/my-route']);
}

但是,导航将被取消,原因如下:

Navigation ID 2 is not equal to the current navigation id 3.

综观角2路由器源,这种情况发生在所述runNavigate方法时id !== this.navigationId(https://github.com/angular/angular/blob/master/modules/@angular/router/src/router.ts#L652).我找不到有关该navigationId属性的任何信息,为什么会发生这种情况以及如何解决它.

在存在的路由之间重定向似乎有效,但不在这些旧的散列标记URL和现有路由之间重定向.路由器中是否必须存在两条路由才能在它们之间进行重定向？

非常感谢帮助.

一旦用户成功完成,我正在尝试显示导航栏.

例如:

如何在"LoginComponent"中的"AppComponent"中更改"showMenu"属性？重要提示:我正在使用路线.

app.ts:

@Component({
  selector: 'app',
  template: `<div *ngIf="showMenu">
               <fnd-menu-nav></fnd-menu-nav>
             </div>
             <router-outlet></router-outlet>
              `,
  directives: [ROUTER_DIRECTIVES, MenuNavComponent]
})
@RouteConfig([
  { path: '/login', name: 'Login', component: LoginComponent, useAsDefault: true },
  { path: '/welcome', name: 'Welcome', component: WelcomeComponent }
])
export class AppComponent {
  public showMenu : boolean;
}

login.component.ts:

@Component({
  selector: 'fnd-login',
  templateUrl: './fnd/login/components/login.component.html',
  providers: [LoginService]
})
export class LoginComponent {
  /* .. other properties */

  constructor(private _router: Router, private _loginService: LoginService ) {
  }
  /* .. other methods  */
  /* …

在ui-router中,很容易在路由配置中定义多个解析,所以我们可以这样说:

export const APP_STATES: Ng2StateDeclaration[] = [
  {
    name: 'dashboard',
    url: '/dashboard', 
    component: DashboardComponent,
    resolve: [
      {
        token: 'playbookDurations',
        deps: [DashboardService],
        resolveFn: (svc: DashboardService) => svc.getPlaybookDurations()
      },
      {
        token: 'playbookSuccesses',
        deps: [DashboardService],
        resolveFn: (svc: DashboardService) => svc.getPlaybookSuccesses()
      },
      {
        token: 'playbookRuns',
        deps: [DashboardService],
        resolveFn: (svc: DashboardService) => svc.getPlaybookRuns()
      },
      {
        token: 'activityLog',
        deps: [DashboardService],
        resolveFn: (svc: DashboardService) => svc.getActivityLog()
      }
    ]
  }
}];

使用Angular2路由器时,需要为resolve参数实现解析器模式.所以像这样:

import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { …

我需要在Angular 2中获得没有params的当前路由,我找到了一种方法来获取当前路径的params,如下所示:

 this.router.url

然后分开它:

 this.router.url.split(';')[0]

但这看起来像是解决方法,我认为应该有更好的方法吗？

尝试在Angular 4中使用nestet路由时出现此错误:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'component' of null
TypeError: Cannot read property 'component' of null
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (http://localhost:4200/vendor.bundle.js:77976:71)
    at http://localhost:4200/vendor.bundle.js:77954:19
    at Array.forEach (native)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseChildRoutes (http://localhost:4200/vendor.bundle.js:77953:29)
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (http://localhost:4200/vendor.bundle.js:77985:22)

这是我的路由代码:

const appRoutes: Routes = [
    {
        path: '',
        component: HomeComponent
    },

    {
        path: 'sobre',
        component: SobreComponent
    },
    {
        path: 'c/:concurso', component: ConcursoItemComponent

        , children: [         
            {

                path: ':cargo',
                component: CargoItemComponent,


                children: [
                    {
                        path: ':disc',
                        component: DisciplinaItemComponent,
                        children: [{
                            path: ':assunto',
                            component: AssuntoItemComponent
                        }] …