为什么所有 Angular 2 ng-bootstrap Modal 代码都必须在 app.module.ts 中位于顶部？

Question

长期.Net/C#/JavaScript/others coder, 刚刚学习 Angular 2. 我很难保持 ng2-bootstrap Modal code/logic 我认为它属于哪里。在我看来，强制导入并包含顶层 app.module.ts 中的所有模态登录代码是没有意义的。我想将其向下移动到 game.module.ts（实际使用的位置）。但是，我可以让模式工作的唯一方法是如果一切都在 app.module.ts.

的顶部

如果您发现下面有任何愚蠢或错误的做法，请指出来，我将不胜感激。我刚学 A2:-)

这是一个例子，说明对我有用...

// ----------------------------------------------------------------------
// src/app/app.component.ts

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

@Component({
    selector: 'app-root',
    template: `
        <a routerLink="/home">Home</a> |
        <a routerLink="/game">Game</a>
        <router-outlet></router-outlet>
    `
})
export class AppComponent { }


// ----------------------------------------------------------------------
// src/app/app.module.ts

import { Component, NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { GameComponent } from './game.component';
import { PageNotFoundComponent } from './not-found.component';
import { LoginModalComponent, LoginModalContent } from './login-modal.component';

const appRoutes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'game', component: GameComponent },
    { path: '**', component: PageNotFoundComponent }
];

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        JsonpModule,
        NgbModule.forRoot(),
        RouterModule.forRoot(appRoutes)
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        GameComponent,
        PageNotFoundComponent,
        LoginModalComponent,
        LoginModalContent
    ],
    bootstrap: [AppComponent],
    entryComponents: [LoginModalContent]
})
export class AppModule { }


// ----------------------------------------------------------------------
// src/app/home.component.ts

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

@Component({
    selector: 'app-root',
    template: `
        <div class="container-fluid">
            <p>
                This is the HOME screen.
            </p>
        </div>
    `
})
export class HomeComponent {
}

@NgModule({
    declarations: [
        HomeComponent
    ],
    bootstrap: [HomeComponent]
})
export class HomeModule {
}


// ----------------------------------------------------------------------
// src/app/game.component.ts

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

@Component({
    selector: 'app-root',
    template: `
        <template ngbModalContainer></template>
        <div class="container-fluid">
            <p>
                This is the GAME screen.
            </p>
            <hr>
            <login-modal-button></login-modal-button>
        </div>
    `
})
export class GameComponent {

}

@NgModule({
    declarations: [
        GameComponent
    ],
    bootstrap: [GameComponent]
})
export class GameModule {

}


// ----------------------------------------------------------------------
// src/app/login-model.component.ts

import { Component, Input } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'ngbd-modal-content',
    template: `
    <div class="modal-header">
        <h4 class="modal-title">Hi there! Please login...</h4>
        <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <p>Hello, {{name}}!</p>
    </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
    </div>
    `
})
export class LoginModalContent {
    @Input() name;

    constructor(public activeModal: NgbActiveModal) { }
}

@Component({
    selector: 'login-modal-button',
    template: `<button class="btn btn-lg btn-outline-primary" (click)="open()">Open the modal</button>`
})
export class LoginModalComponent {
    constructor(private modalService: NgbModal) { }

    open() {
        const modalRef = this.modalService.open(LoginModalContent);
        modalRef.componentInstance.name = 'World';
    }
}

以下是我尝试构建应用程序的方式，因为对我来说更有意义的是，登录模式应该在 game.component.ts 实际使用的地方.

这是一个示例，说明什么对我来说 不起作用 （底部错误）。唯一的变化是将登录模式部分从 AppModule 移到 GameModule 中...

// ----------------------------------------------------------------------
// src/app/app.module.ts

import { Component, NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { GameComponent } from './game.component';
import { PageNotFoundComponent } from './not-found.component';

const appRoutes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'game', component: GameComponent },
    { path: '**', component: PageNotFoundComponent }
];

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        JsonpModule,
        NgbModule.forRoot(),
        RouterModule.forRoot(appRoutes)
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        GameComponent,
        PageNotFoundComponent
    ],
    bootstrap: [AppComponent],
})
export class AppModule { }


// ----------------------------------------------------------------------
// src/app/game.component.ts

import { Component, NgModule } from '@angular/core';
import { LoginModalComponent, LoginModalContent } from './login-modal.component';

@Component({
    selector: 'app-root',
    template: `
        <template ngbModalContainer></template>
        <div class="container-fluid">
            <p>
                This is the GAME screen.
            </p>
            <hr>
            <login-modal-button></login-modal-button>
        </div>
    `
})
export class GameComponent {

}

@NgModule({
    declarations: [
        GameComponent,
        LoginModalComponent,
        LoginModalContent
    ],
    bootstrap: [GameComponent],
    entryComponents: [LoginModalContent]
})
export class GameModule {

}

这是 Chrome 控制台中使用上述代码的错误...

Answer 1

1) 从 AppModule

的 declarations 数组中删除 GameComponent

2) 将 GameModule 导入到 AppModule

app.module.ts

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        JsonpModule,
        NgbModule.forRoot(),
        RouterModule.forRoot(appRoutes),
        GameModule  // <== this line
    ],
    declarations: [
        AppComponent,
        HomeComponent
    ],
    bootstrap: [AppComponent],
})
export class AppModule { }

3) 将 NgbModalModule 导入 GameModule 以执行 ngbModalContainer 指令工作

game.module.ts

import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    imports: [NgbModalModule], // <== this line
    declarations: [
        GameComponent,
        LoginModalComponent,
        LoginModalContent
    ],
    bootstrap: [GameComponent],
    entryComponents: [LoginModalContent]
})
export class GameModule {}

我也推荐你阅读这两篇文章：

为什么所有 Angular 2 ng-bootstrap Modal 代码都必须在 app.module.ts 中位于顶部？

Why does all Angular 2 ng-boostrap Modal code have to be at top in app.module.ts?

modal-dialog

ng-bootstrap

angular