機能モジュールのコンポーネントでアプリモジュールのコンポーネントを使用する
ディペンドゥポール
角度ソースを複数の機能モジュールにリファクタリングしようとしていました。以前のソースにはモジュールが1つしかなく、すべてのコンポーネントがその1つのモジュール内で宣言されていました。リファクタリングについては、次の手順を実行しました。
機能モジュールを作成しました
コンポーネントをアプリモジュールから機能モジュールに移動しました。宣言リストとエクスポートリストの機能モジュールにコンポーネントを追加しました。
移動したコンポーネントの参照をアプリモジュールから削除しました
機能モジュールをアプリモジュールにインポートしました。
ソースコードはコンパイルされますが、サイトが読み込まれません。コンソールでは、HTML上の機能モジュールのコンポーネントがアプリモジュールのコンポーネントを使用しているため、クラッシュすることがわかりました。
機能モジュールでアプリモジュールのコンポーネントを使用するために追加の手順は必要ないと思いました。私は何かが足りないのですか？
追加：以下のHTMLは、移動されたコンポーネント（アプリモジュールから機能モジュールに移動したコンポーネント）からのものであり、アプリモジュールで宣言されたapp-organization-user-searchコンポーネントを使用しています。
<div class="col-md-12 full-width py-2">
<app-organization-user-search (addClicked)="addParticipant($event)" (cancelClicked)="addingParticipants = false"></app-organization-user-search>
追加：特定の問題に対する回答を検索しているすべての人にとって、解決策は受け入れられた回答のコメントにあります。
マイケルチェコウスキー
1つのモジュールを複数のモジュールに分割するには、すべてのモジュールとコンポーネントを正しくエクスポートおよびインポートする必要があります。
app.module.ts *「ルート」モジュール
@NgModule({
declarations: [
AppComponent,
],
imports: [
// angular
BrowserModule,
HttpClientModule,
// splitted modules
DiversityMattersModule,
PreventingAirPolutionModule,
PeacfullyRevolutionModule,
// ...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
多様性-matters.module.ts 上記のリストのモジュールの例
@NgModule({
imports: [
// ...
],
declarations: [
AwesomeComponent,
// ...
],
exports: [
AwesomeComponent,
// ...
],
})
に依存するすべてのコンポーネントがAppComponentインポートできるようになりましたAwesomeComponent。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
コアモジュールのコンポーネントを使用する
- 2
機能モジュールでコンポーネントを宣言する
- 3
ルート/メインモジュールで使用すると、サブモジュールのAngular4コンポーネントが機能しない
- 4
angle2の子モジュールコンポーネントで親モジュールコンポーネントを使用する方法
- 5
SwiftアプリケーションのコンポーネントをSwiftモジュールに分割する
- 6
別のモジュールのコンポーネントを使用する
- 7
あるコンポーネントをモジュールから別のモジュールのコンポーネントにインポートする
- 8
インポートしたモジュールのコンポーネントを使用する
- 9
子モジュール内でインポートされたモジュールのコンポーネントを使用する
- 10
角度で動的にロードされたモジュール コンポーネントで既存のコンポーネントを使用する方法
- 11
既存のモジュールまたはコンポーネントに浸透することで新しい機能を追加するJoomlaプラグイン
- 12
反応コンポーネントの機能をモジュール化して抽象化します
- 13
Angular4の複数のモジュールにコンポーネントをインポートする
- 14
Vueコンポーネントで外部Typescriptモジュールをインポートして使用する
- 15
モジュールを介して複数のAngularコンポーネントをインポートする
- 16
スプリングブートでマルチモジュールコンポーネントのスキャンが機能しない
- 17
Angular 5、サブモジュールのコンポーネントを使用
- 18
Angular5モジュールのコンポーネントを使用
- 19
モジュール間でコンポーネントを共有する
- 20
JHipsterのような複数のモジュールを使用するプロジェクトでネストされた角度コンポーネント
- 21
機能モジュールをインポートするときにAngular 2のメインコンポーネントがロードされないが、エクスポートされていない機能モジュールのコンポーネントをロードする
- 22
異なるモジュールで角度コンポーネントルーティングを使用する
- 23
共有モジュール内の未使用のコンポーネントはアプリケーションの速度を低下させますか？
- 24
Androidでアプリサブコンポーネントのモジュール構造を実現するにはどうすればよいですか？
- 25
動的エントリコンポーネントをモジュールにAngularで渡し、次にそれらを別のモジュールに再度渡す
- 26
Angular-別のモジュールのコンポーネントを使用する
- 27
Angular2-アップグレードされたAngularJSコンポーネントのアプリモジュール宣言が機能しない
- 28
Angular1.5のコンポーネントとAngularモジュールの使用
- 29
スコープの異なるモジュールを備えたDagger2コンポーネント
コメントを追加