3

我正在创建 Angular 4 应用程序并尝试实现基本路由。我的应用程序编译正常，但我的路由不起作用

我收到错误 Component HomeComponent is not part of any NgModule 或该模块尚未导入您的模块。

我还没有配置路由器链接，但假设路由应该从浏览器中的请求中工作。

当我单击主页时，home.component.html 的内容应该类似地加载，单击编辑、新建、电影应该分别执行相同的操作

有人能告诉我我的进口是否有任何问题。具体来说

有电影、家庭、编辑和新的

这是我的文件夹的结构

在此处输入图像描述

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import {FormsModule} from '@angular/forms';
    import {HttpModule} from '@angular/http'
    import { AppComponent } from './app.component';
    import { NavbarComponent } from './navbar/navbar.component';
    import { TopbarComponent } from './topbar/topbar.component';
    import { FooterbarComponent } from './footerbar/footerbar.component';
    import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
    import {AppRoutingModule} from './approuting.module';
    import {HomeModule} from './home/home.module';
    import {MovieModule} from './movie/movie.module';
    import { MRDBCommonService } from './shared/services/mrdb.common.service';
    import { NotFoundComponent } from './not-found/not-found.component';
    import { SharedModule } from './shared/shared.module';


    @NgModule({
      declarations: [
        AppComponent,
        FooterbarComponent,
        TopbarComponent,
        NavbarComponent,
        NotFoundComponent  
      ],
      imports: [
        BrowserModule,
        HttpModule,
        SharedModule,
        AppRoutingModule
      ],
      providers: [MRDBGlobalConstants,
                  MRDBCommonService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

批准.module.ts

import {NgModule} from '@angular/core';
import {Routes,RouterModule} from '@angular/router';
import {MovieComponent} from './movie/movie.component';
import {HomeComponent}  from '../app/home/home.component';
import {NotFoundComponent} from './not-found/not-found.component';
import {NewmovieComponent} from './movie/new/newmovie.component';
import {EditmovieComponent} from './movie/edit/editmovie.component';

export const routes: Routes = [
{path : '', component : HomeComponent},
{path: 'movie', component : MovieComponent},
{path : 'new' , component : NewmovieComponent },
{path : 'edit' , component : EditmovieComponent },
{path: '**',component : NotFoundComponent}

];

@NgModule({
     imports: [RouterModule.forRoot(routes,{useHash: true})],
     exports: [RouterModule]

})

export class AppRoutingModule{}

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [HomeComponent],
  declarations: [HomeComponent]
})
export class HomeModule { }

主页.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
4

3 回答 3

3

HomeModule在您的 app.module.ts 中添加内部导入

imports: [
        BrowserModule,
        HttpModule,
        SharedModule,
        HomeModule,
        AppRoutingModule
      ],
于 2017-11-07T18:06:24.113 回答
1

创建第一个 SharedHomeComponent.ts

import { HomeComponent } from './header/header.component';
import { NgModule,OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
    import { RouterModule } from '@angular/router';
    @NgModule({
        imports: [
            CommonModule,RouterModule
        ],
        exports: [HomeComponent],
        declarations: [HomeComponent]
    })
    export class SharedHomeComponent implements OnInit {
        ngOnInit(): void {
            //throw new Error("Method not implemented.");
        }
      constructor() {
       }
    }

然后，每当您想使用 HomeComponent 时，然后导入到与组件相关的模块中，例如 app.module.ts或不同的模块。然后你可以使用 home 组件选择器进入多个模块组件。

于 2019-12-26T12:13:42.073 回答
0

您必须将所有“AlabalaModule”添加到导入中

 imports: [
    BrowserModule,
    HttpModule,
    SharedModule,
    AppRoutingModule,
    AlabalaModule
  ],

你也需要像 tis -> { Alabala } 这样的空格，我很确定 {Alabala} 不是有效的语法

于 2017-11-07T18:04:54.983 回答