[英]Angular 6 routerlink in child module and router-outlet in parent (app.component)
我正在使用RouterModule,並且routerLinks出現問題。
routerLinks不起作用(錨點不可單擊),因為它們位於子模塊中,我也不知道如何解決此問題。
層次:
App.Module(路由器出口)->元素模塊-> Navi模塊(routerLinks)
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { ElementsModule } from './elements/elements.module';
import { LandingComponent } from './pages/landing.component';
import { GenreComponent } from './pages/genre.component';
import { SinglePostComponent } from './pages/singlepost.component';
import { ListComponent } from './pages/list.component';
import { AppComponent } from './app.component';
import { DataService } from './data.service';
@NgModule({
imports: [
BrowserModule,
ElementsModule,
HttpClientModule,
RouterModule.forRoot([
{path: "", component: LandingComponent},
{path: "post/:id", component: SinglePostComponent},
{path: "lists", component: ListComponent}
], {
useHash: true,
})
],
declarations: [
AppComponent,
LandingComponent,
GenreComponent,
SinglePostComponent,
ListComponent
],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<router-outlet></router-outlet>
navi.componentent.html
<a routerLink="/movies">Movies</a>
在我的項目中,我指定了一個用於處理路線的模塊,其他模塊可以導入:
APP-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './main/main.component';
const routes: Routes = [
{
path: '',
component: MainComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
這是由我的其他模塊導入的,例如:
@NgModule({
declarations: [
AppComponent,
MainComponent
],
imports: [
AppRoutingModule
]
})
export class AppModule {}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.