Question

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

- 主页

- 注册

- 登录

在登录模板（auth.template.html）中，我可以选择导航到SignUp。但是我设置的路由如下所示。它总是给我 http://localhost:xxxx/auth/signup

我无法从auth组件加载注册组件。看起来我缺少一些基本面，但我不确定它是什么。以下是代码段。

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>

Answer 1

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

所以你应该使用/。

只是FYI ...如果您想从 root 开始路径，那么您将使用{{1}}开始链接。

Angular 2（最终发布）子路由