Angular 2+路由-不确定为什么不进行导航

时间:2018-08-15 12:02:53

标签: angular routing angular2-routing

试图了解简单的路由...

我制作了一个简单的应用程序,顶部带有一个菜单,该菜单将在底部显示一个页面(home.component.html)...非常简单的演示应用程序:

simple app to learn routing...

可以想象,在创建子路线时,我似乎无法导航...我正在测试的那个是INBOX ...该调用应用于导航到子路线中的该页面,并且在app.module.ts中应该包含不应该存在的东西,或者在包含路由模块的home.module.ts中应该包含不存在的东西?我是否将home.module.ts正确链接到路由,并且希望如何从INBOX菜单中调用它以打出子路由?我试图给孩子路线起一个插座的名字,读过文章,但对这个概念感到困惑。任何人都可以看到他们曾经帮助过我们的明显信息。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from "@angular/common/http";
import { RouterModule } from '@angular/router';
import { HomeModule } from './home/home.module';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { SearchComponent } from './search/search.component';
import { SettingsComponent } from './settings/settings.component';
import { InboxComponent } from './inbox/inbox.component';
import { HomeNavMenuComponent } from './home-nav-menu/home-nav-menu.component';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    DashboardComponent,
    SearchComponent,
    SettingsComponent,
    InboxComponent,
    HomeNavMenuComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'Dashboard', component: DashboardComponent, pathMatch: 'full' },
      { path: 'Search', component: SearchComponent, pathMatch: 'full' },
      { path: 'Settings', component: SettingsComponent, pathMatch: 'full' },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<app-nav-menu></app-nav-menu>
<router-outlet></router-outlet>

nav-menu.component.html

<div class='main-nav'>
    <div class='navbar navbar-inverse'>
        <div class='navbar-collapse collapse' [ngClass]='{ "in": isExpanded }'>
            <ul class='nav navbar-nav'>
                <li [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
                    <a [routerLink]='["/"]' (click)='collapse()'>
                        <span class='glyphicon glyphicon-home'></span> Home
                    </a>
                </li>
                <li [routerLinkActive]='["link-active"]'>
                    <a [routerLink]='["/Dashboard"]' (click)='collapse()'>
                        <span class='glyphicon glyphicon-signal'></span> Dashboard
                    </a>
                </li>
                <li [routerLinkActive]='["link-active"]'>
                    <a [routerLink]='["/Search"]' (click)='collapse()'>
                        <span class='glyphicon glyphicon-search'></span> Search
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

home.component.html

<app-home-nav-menu></app-home-nav-menu>
<router-outlet name="child"></router-outlet>

home-nav-menu.component.html

<ul class='nav navbar-nav'>
  <li [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
    <a [routerLink]='["/"]'>
      <span class='glyphicon glyphicon-home'></span> Home
    </a>
  </li>
  <li [routerLinkActive]='["link-active"]'>
    <a [routerLink]='["/Settings"]'>
      <span class='glyphicon glyphicon-cog'></span> Settings
    </a>
  </li>
  <li>
    <a [routerLink]='["/Inbox"]'>
      <span class='glyphicon glyphicon-inbox'></span> Inbox
    </a>
  </li>
</ul>

home.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { InboxComponent } from '../inbox/inbox.component';

@NgModule({
  declarations: [
    InboxComponent
  ],
  imports: [
    RouterModule.forChild([
      {
        path: 'Inbox', component: InboxComponent, pathMatch: 'any', outlet: 'child'
      }
    ])
  ],
  providers: []
})
export class HomeModule { }

0 个答案:

没有答案