angular - 为什么所有 Angular 2 ng-bootstrap 模态代码都必须位于 app.module.ts 的顶部？

Question

长期从事 .Net/C#/JavaScript/其他编码，刚刚学习 Angular 2。我很难将 ng2-bootstrap Modal 代码/逻辑保留在我认为属于它的地方。在我看来，被迫在顶级 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 {}

我还推荐你阅读这两篇文章:

• https://angular.io/docs/ts/latest/guide/ngmodule.html
• https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html