Angular 2（最终版本）子路由答案

【问题标题】：Angular 2 (final release) child routingAngular 2（最终版本）子路由
【发布时间】：2017-01-28 12:55:49
【问题描述】：

我正在尝试从子组件导航到子组件。我有以下 3 条主要路线

--首页

--注册

--登录

在登录模板 (auth.template.html) 中，我可以选择导航到 SignUp。但是我设置如下的路由并没有这样做。它总是给我 http://localhost:xxxx/auth/signup

我无法从身份验证组件加载注册组件。看起来我缺少一些基础知识，但我不确定它是什么。下面是代码sn-ps。

app.routing.ts

import { Router, RouterModule }     from '@angular/router';

import { HomeComponent }            from './home/home.component';
import { NotFoundComponent }        from './notfound/not-found.component';


export const routing = RouterModule.forRoot([
    { path: '', component: HomeComponent},
    { path: '**', component: NotFoundComponent }
])

app.module.ts

import { NgModule }         from '@angular/core';
import { BrowserModule }    from '@angular/platform-browser';

import { AppComponent }     from './app.component';

import { HomeModule }       from './home/home.module';
import { AuthModule }       from './authentication/auth.module';
import { SignupModule }     from './signup/signup.module';
import { NotFoundModule }   from './notfound/not-found.module';

import { routing }          from './app.routing';
import { authRouting }      from './authentication/auth.routing';
import { signupRouting }    from './signup/signup.routing';

import { AuthService }      from './authentication/auth.service';
import { AuthGuard }        from './authentication/auth-guard.service';

@NgModule({
    imports     : [BrowserModule, HomeModule, AuthModule, ProfileModule, NotFoundModule, SignupModule, authRouting, signupRouting, routing],
    declarations: [AppComponent],
    providers   : [AuthService, AuthGuard],
    bootstrap   : [AppComponent]
})

export class AppModule { }

auth.routing.ts

import { Router, RouterModule }     from '@angular/router';

import { AuthComponent }  from './auth.component';

export const authRouting = RouterModule.forChild([
    { path: 'auth', component: AuthComponent },
])

signup.routing.ts

import { Router, RouterModule }     from '@angular/router';

import { SignupComponent }  from './signup.component';

export const signupRouting = RouterModule.forChild([
    { path: 'signup', component: SignupComponent }
])

app.template.html

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
       ....
        <div class="navbar-collapse collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right"  data-toggle="collapse" data-target=".navbar-collapse.in" >
                <li>
                    <a routerLink="">
                       Home
                    </a>
                </li>
                <li>
                    <a routerLink="signup">
                        Signup
                    </a>
                </li>
                <li >
                    <a routerLink="auth">
                       Login
                        </a>
                    </li>
            </ul>
        </div>

    </div>
</div>
<div class="container-fluid">
    <router-outlet></router-outlet>
</div>

auth.template.html

 <div class="form-group">
      <p>
          Dont have an account yet? Sign up <a routerLink="signup" <strong>here</strong></a>
      </p>
  </div>

【问题讨论】：

在auth.template 中尝试使用routerLink="[./signup]" or routerLink="[../signup]" 并告诉我。
@micronyks，它给出了错误的路由作为 localhost:55536/auth/%5B./signup%5D
试试[routerLink]="['../signup']"或routerLink="../signup"，它们几乎是等价的

标签： angular angular2-routing

【解决方案1】：

routerLinks 使用相对路由。如果您在auth 路线并且链接是routerLink="signup"，那么链接将指向auth/signup。要向后遍历，请像使用文件系统一样使用../。因此，如果auth 和signup 处于同一级别（兄弟姐妹），那么您应该向上遍历到父级，然后转到signup。

所以你应该使用routerLink="../signup"。

仅供参考...如果您想从 root 开始路径，那么您可以使用/ 开始链接。

【讨论】：