Angular 角度2导航条布线

首先，我是个新手

我在navbar中使用“[routerLink]”时遇到了一些问题。 当我单击链接时，什么也不会发生，但是如果我直接访问链接（localhost:port/client1），它们就可以工作

home.component.ts

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

@Component({
templateUrl: 'app/Components/home.component.html'
})

export class HomeComponent {
}

home.components.html

  <div>
     <nav class='navbar navbar-inverse'>
        <div class='container-fluid'>
            <ul class='nav navbar-nav'>
                <li><a [routerLink]="['client1']">Client 1</a></li>
                <li><a [routerLink]="['client2']">Client 2</a></li>
            </ul>
        </div>
     </nav>
     <div class='container'>
        <router-outlet></router-outlet>
     </div>
      </div>  

和app.moule.ts

import { Client1Component } from './components/client1.component';
import { Client2Component } from './components/client2.component';
import { HomeComponent } from './components/home.component';

@NgModule({
    imports: [BrowserModule, ReactiveFormsModule, HttpModule, routing, Ng2Bs3ModalModule, RouterModule],
    declarations: [AppComponent, HomeComponent, Client2Component, Client1Component],
    bootstrap: [AppComponent]
})

编辑：

必须将链接路径设置为子路径（app.routing.ts）

---

需要将路由导出到app.module.ts

app.routing.ts

import { HomeComponent } from './components/home.component';
import { Client1Component } from './components/client1.component';
import { Client1Component } from './components/client2.component';

const appRoutes: Routes = [
    ...
    { path: 'home', component: HomeComponent },
    { path: 'client1', component: Client1Component },
    { path: 'client2', component: Client2Component },
    ...
];

    const appRoutes: Routes = [
        ...
        { path: 'home', component: HomeComponent, children: [ 
            { path: 'client1', component: Client1Component },
            { path: 'client2', component: Client2Component }
        ]},
        ...
    ];

const appRoutes: Routes = [
    ...
    { path: 'home', component: HomeComponent },
    { path: 'client1', component: Client1Component },
    { path: 'client2', component: Client2Component },
    ...
];
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {

}

您还可以像这样链接到路由

<li><a routerLink="/client1">Client 1</a></li>

客户端1

我发现一个库非常有用。你会有一个app.states.ts，看起来像这样

import {myDestinationState} from 'my/state/path/myState.state';
export const APP_STATES = [myDestinationState];
export const APP_NAV = [{name: 'myState, state: myDestinationState}];

import {myCustComponent} from ./myCust.component';
export const myCustomState = {
    name: 'my-custom-state',
    url: 'myApp/customState',
    component: myCustComponent
};

然后，无论你想在哪里导航，你都有一个像这样的

myDestination.state.ts

import {myDestinationState} from 'my/state/path/myState.state';
export const APP_STATES = [myDestinationState];
export const APP_NAV = [{name: 'myState, state: myDestinationState}];

import {myCustComponent} from ./myCust.component';
export const myCustomState = {
    name: 'my-custom-state',
    url: 'myApp/customState',
    component: myCustComponent
};

---

然后使用函数

this.stateService.go（'my-custom-state'）

导航到该页面。或者，您可以输入应用程序导航常量并通过该常量访问状态。

空路由的重定向设置在哪里？