Question

首先，我是棱角分明的新人。

我在制作＆＃34; [routerLink]＆＃34;时遇到了一些麻烦。在导航栏中工作。当我点击链接没有任何反应时，但如果我直接访问链接（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 }
        ]},
        ...
    ];

Answer 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>

Answer 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常数并访问状态。

Angular 2导航栏路由

2 个答案: