Angular 2 导航栏路由答案

【问题标题】：Angular 2 navbar routingAngular 2 导航栏路由
【发布时间】：2018-01-04 16:53:02
【问题描述】：

首先我是 Angular 的新手。

我在使“[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>

client1 和 client2（相同的 img 显示）

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

@Component({
    template: `<img src="../../images/users.png" style="text-align:center"/>`
})

export class Client1Component {
}

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 },
    ...
];

和 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）

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

【问题讨论】：

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

标签： angular angular2-routing angular2-router

【解决方案1】：

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

app.routing.ts

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>

【讨论】：

【解决方案2】：

我发现有用的库是@uirouter/angular。你会有一个 app.states.ts 看起来像这样

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

然后无论你想导航到哪里，你都有一个像这样的myDestination.state.ts

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

然后您使用函数this.stateService.go('my-custom-state') 导航到该页面。或者您可以将您的 APP_NAV 常量保存下来并通过它访问状态。

【讨论】：