试图了解简单的路由...
我制作了一个简单的应用程序,顶部带有一个菜单,该菜单将在底部显示一个页面(home.component.html)...非常简单的演示应用程序:
simple app to learn routing...
可以想象,在创建子路线时,我似乎无法导航...我正在测试的那个是INBOX ...该调用应用于导航到子路线中的该页面,并且在app.module.ts中应该包含不应该存在的东西,或者在包含路由模块的home.module.ts中应该包含不存在的东西?我是否将home.module.ts正确链接到路由,并且希望如何从INBOX菜单中调用它以打出子路由?我试图给孩子路线起一个插座的名字,读过文章,但对这个概念感到困惑。任何人都可以看到他们曾经帮助过我们的明显信息。
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-nav-menu></app-nav-menu>
<router-outlet></router-outlet>
<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>
<app-home-nav-menu></app-home-nav-menu>
<router-outlet name="child"></router-outlet>
<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>
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 { }