Angular2在模塊中導入組件

我有一個加載屏幕組件，我希望在不同模塊中的不同組件之間重用。Angular2在模塊中導入組件

我有一個的AppModule

@NgModule ({ 
    declarations: [ 
    LoadingScreenComponent //has tag app-loading-screen 
    ], 
    imports: [ 
    ReportsModule,DashboardModule 
    ] 

    }); 
export class AppModule { 
}

在ReportsModule我

 @NgModule ({ 
    declarations: [ 
    ReportsComponent 
    ], 
    }); 
export class ReportsModule { 
}

在ReportsComponent HTML文件

<app-loading-screen></app-loading-screen>

在做這種方式我得到一個錯誤，

'app-loading-screen' is not a known element

不同模塊中的其他幾個組件也需要使用加載屏幕組件。

爲什麼這會失敗，但我已經在根模塊中包含LoadingScreenComponent。或者我該怎麼辦呢？

來源

2017-08-28 GEOFFREY MWANGI

能否請您提供的LoadingScreenComponent的代碼呢？ –

組件只有一個文本顯示正在加載。 –

創建一個共享模塊並聲明，導出LodingScreenModule，然後添加AppModule和ReportsModule。 – Sreemat

你可以做裝載儀屏幕組件作爲共享模塊和你進口共享模塊都應用模塊和報表模塊

import { NgModule} from '@angular/core'; 
@NgModule({ 
imports: [ 
], 
declarations: [ 
LoadingScreenComponent 
], 
providers: [ 

], 
exports: [ 
    LoadingScreenComponent 
] 
}) 
export class SharedModule { }

然後你既可以儀表盤模塊和報表模塊

來源

2017-08-28 07:31:10 Robert

將bootstrap: [ LoadingScreenComponent ]添加到您的NgModule。

編輯

@NgModule ({ 
    declarations: [ 
    LoadingScreenComponent //has tag app-loading-screen 
    ], 
    imports: [ 
    ReportsComponent,DashboardModule 
    ], 
    bootstrap: [ LoadingScreenComponent ] 

    }); 
export class AppModule { 
}

而且在指數是什麼定義呢？

正常情況下，您將報表html添加到您的主要組件而不是其他方式。

來源

2017-08-28 07:22:48 Swoox

LoadingScreenComponent在AppModule中聲明，但導入到AppModule的ReportsModule不知道LoadingScreenComponent。您需要重構爲其創建通用模塊並在其中導入LoadingScreenComponent。

來源

2017-08-28 07:25:57 Vega

感謝解決它，示例代碼已提供由@robert下面。 –

請在您的LoadingScreenComponent中包含選擇器，如下所示。選擇器將用於應用組件

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

@Component({ 
    selector: 'app-loading-screen', 
    templateUrl: 'loading-screen.component.html' 
}) 

export class LoadingScreenComponent {}

來源

2017-08-28 07:28:26

其生成元件後已包含有角度cli –

添加LoadingScreenComponent到出口陣列中的的AppModule。這將使全球訪問：

@NgModule({ 
    declarations: [ 
     LoadingScreenComponent //has tag app-loading-screen 
    ], 
    imports: [ 
     ReportsModule, 
     DashboardModule 
    ], 
    exports: [ 
     LoadingScreenComponent 
    ] 
}) 
export class AppModule { 
}

否則，最好的方法是創建一個共享的模塊和導入模塊要使用LoadingScreenComponent任何其他模塊：

import { NgModule } from '@angular/core'; 
import { LoadingScreenComponent } from '...'; //Path to the LoadingScreenComponent 

@NgModule({ 
    declarations: [ 
     LoadingScreenComponent 
    ],  
    exports: [ 
     LoadingScreenComponent 
    ] 
}) 
export class SharedModule { }

和進口它與其它模塊是這樣的：

import { SharedModule } from '...'; //Path to the SharedModule 

@NgModule({ 
    declarations: [ 
     ReportsComponent 
    ], 
    imports[ 
     SharedModule 
    ] 
}) 
export class ReportsModule { }

來源

2017-08-28 07:29:51

在導入共享模塊創建其他模塊中的這樣一個共享模塊和進口。

shared.module.ts

@NgModule({ 
     imports: [ 
      //If needed 
     ], 
     declarations: [ 
      LoadingScreenComponent 
     ], 
     exports:[LoadingScreenComponent] 
}) 
export class SharedModule {}

在的AppModule

@NgModule ({ 
    imports: [ 
    SharedModule 
    ] 
    }); 
export class AppModule {}

在ReportModule

@NgModule ({ 
    declarations: [ 
    SharedMoudule, 
    ReportsComponent 
    ], 
    }); 
export class ReportsModule {}

來源

2017-08-28 07:39:44 Sreemat

Angular2在模塊中導入組件

回答

相關問題