4

Angular 2 の最終リリース バージョンを実行している ngModule とコンポーネントの構成に問題があります。

これは私が持っているものです:

//PageHeaderModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PageHeaderComponent } from './index';


@NgModule({
  imports: [CommonModule],
  declarations: [PageHeaderComponent]
})


export class PageHeaderModule { }

//Shared Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { Routes, RouterModule } from '@angular/router';

import { HeaderComponent, SideBarComponent, BurgerMenuComponent, FooterComponent, InnerSpinnerComponent, PageHeaderComponent  } from "./components/index";
import { UniqueNameValidationByList } from "./directives/index";
import { LowerCasePipe, WhitespacePipe } from "./pipes/index";

@NgModule({
    imports: [CommonModule, RouterModule],
    declarations: [
        PageHeaderComponent,
        HeaderComponent,
        SideBarComponent,
        BurgerMenuComponent,
        FooterComponent,
        InnerSpinnerComponent,
        UniqueNameValidationByList,
        LowerCasePipe, WhitespacePipe
    ],
    exports: [
        PageHeaderComponent,
        HeaderComponent,
        SideBarComponent,
        BurgerMenuComponent,
        FooterComponent,
        InnerSpinnerComponent,
        UniqueNameValidationByList,
        LowerCasePipe, WhitespacePipe
    ],
})

export class SharedModule { }

//AppModule 

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Routes, RouterModule } from '@angular/router';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

import { routing, appRoutes }  from './app.routes';
import { AppComponent }   from './app.component';


import { BillingModule }  from './billing/billing.module';
import { CustomersModule }  from './customers/customers.module';
import { DashboardModule }  from './dashboard/dashboard.module';
import { DevicesModule }  from './devices/devices.module';
import { GroupsModule }  from './groups/groups.module';
import { ProductsModule }  from './products/products.module';
import { ReportingModule }  from './reporting/reporting.module';
import { LoginModule }  from './login/login.module';

import { SharedModule } from "./shared/shared.module";


import { SideBarService } from "./shared/components/index";
import { SignalRService, CountriesService } from "./shared/services/index";


@NgModule({
    imports: [BrowserModule,
        RouterModule.forRoot(appRoutes, { useHash: true }),
        routing,
        SharedModule,
        BillingModule,
        CustomersModule,
        DashboardModule,
        DevicesModule,
        GroupsModule,
        ProductsModule,
        ReportingModule,
        LoginModule
    ],
    declarations: [AppComponent],
    providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy },
        SideBarService,
        SignalRService,
        CountriesService],
    bootstrap: [AppComponent],
}) 

export class AppModule { }

ここで 2 つのことに注意してください。

1）ページヘッダーモジュールを使用していません。これは、sharedModuleがこれらすべての共有コンポーネントを処理し、代わりに1つずつ作成する必要があると思うためですが、よくわかりません。

2) アプリ内の残りのモジュールではなく、共有モジュールで「エクスポート」を使用するだけです

私が得ているエラーはこれです：

ここに画像の説明を入力

私は多くのことを試してきましたが、私の問題を解決するものはないようです。あなたが提供できるどんな助けでも本当に感謝しています.

さらに情報が必要な場合は、お知らせください。

ありがとう

4

1 に答える 1

0

どのモジュールが使用されているかはわかりませんが、ルートモジュールではなく、コンポーネントを使用して実際のモジュール内PageHeaderComponentにインポートする必要があることを理解する必要があります。SharedModule

これがモジュールがプロバイダーに対して機能する方法であるため、それが機能すると考える理由がわかります（ルートモジュールにプロバイダーを含むモジュールをインポートし、そこから子モジュール全体にプロバイダーを注入できます）

これは、角度のあるドキュメントで見つけた部分であり、役立つことを願っています:

モジュールは、他のモジュールで宣言されているコンポーネント、ディレクティブ、またはパイプへのアクセスを継承しません。AppModule がインポートするものは、ContactModule とは無関係であり、その逆も同様です。ContactComponent が [(ngModel)] とバインドする前に、その ContactModule は FormsModule をインポートする必要があります。

于 2016-12-11T10:10:25.950 に答える