web-dev-qa-db-ja.com

angular 6でルーティングが正しく機能しない

3つのコンポーネントを含む小さなangularプロジェクトを開発しています。そのプロジェクトには、component.moduleというサブモジュールがあり、そのモジュールにルーティングを追加し、component.moduleインクルードをアプリに追加しました。モジュール。

エラーなしでコンパイルされますが、画面には何も表示されません（下の画像を参照）。

enter image description here

プロジェクトのフォルダー構造は次のようになっています。

folder structure

components/app-routing.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule, Routes } from "@angular/router";

import { MainLayoutComponent } from "./main-layout/main-layout.component";
import { IntentListComponent, IntentCreateComponent } from "./intent";

const routes: Routes = [
  { path: "", redirectTo: "/home", pathMatch: "full" },
  {
    path: "home",
    component: MainLayoutComponent,
    children: [
      { path: "list", component: IntentListComponent },
      { path: "create", component: IntentCreateComponent }
    ]
  } 
];

@NgModule({
  imports: [CommonModule, RouterModule.forRoot(routes)],
  declarations: [],
  exports: [RouterModule]
})
export class AppRoutingModule {}

components/component.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { AppRoutingModule } from "./app-routing.module";
import { MainLayoutComponent } from "./main-layout/main-layout.component";
import { IntentCreateComponent, IntentListComponent } from "./intent";

import { ProjectCreateComponent } from "./project";

@NgModule({
  declarations: [
    MainLayoutComponent,
    IntentCreateComponent,
    IntentListComponent,
    ProjectCreateComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    AppRoutingModule
  ],
  providers: []
})
export class ComponentModule {}

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { ComponentModule } from "./components/component.module";



@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

    ComponentModule,

  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppModule {}

app.component.html

<app-main-layout></app-main-layout>

app/components/main-layout/main-layout.component.html

<div class="side-bar">
</div>
  
<div class="content-wrapper">
  <router-outlet></router-outlet>
</div>
angulartypescriptrouting
4
Isanka Thalagala

ComponentModuleモジュールから何もエクスポートしない場合、AppModuleにインポートしても、ComponentModuleからは何も得られません。

RoutingでMainLayoutComponentのComponentModuleとAppModuleを使用しているため、これらをexportsに追加する必要がありますComponentModuleの配列も同様です。

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { AppRoutingModule } from "./app-routing.module";
import { MainLayoutComponent } from "./main-layout/main-layout.component";
import { IntentCreateComponent, IntentListComponent } from "./intent";

import { ProjectCreateComponent } from "./project";

@NgModule({
  declarations: [
    MainLayoutComponent,
    IntentCreateComponent,
    IntentListComponent,
    ProjectCreateComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    AppRoutingModule
  ],
  providers: [],
  exports: [AppRoutingModule, MainLayoutComponent]
})
export class ComponentModule {}

PS：ComponentModuleからAppModuleに何かを使用したい場合は、追加してComponentModuleからエクスポートする必要がありますexportsのComponentModule配列に。

5
SiddAjmera

ルート設定は次のようになります。

const routes: Routes = [
  { path: "", redirectTo: "/home", pathMatch: "full" },
  {
    path: "home",
    component: MainLayoutComponent,
    children: [
      { path: "", component: IntentListComponent },
      { path: "create", component: IntentCreateComponent },
  ]
  }];

または

    const routes: Routes = [
  { path: "", redirectTo: "/home", pathMatch: "full" },
  {
    path: "home",
    component: MainLayoutComponent,
    children: [
      { path: "list", component: IntentListComponent },
      { path: "create", component: IntentCreateComponent },
      { path: "", redirectTo: "list" pathMatch: "full" }
  ]
  }];

コンポーネントが読み込まれるが、ビューには何もない。ただし、設定については、/ home/listまたは/ home/createにルーティングすると、そのコンポーネントがロードされます

2
Suryan