簡體   English   中英

子模塊中的Angular 6 routerlink和父模塊中的router-out(app.component)

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM