Warum muss der angular 2 ng-boostrap Modal Code in app.module.ts ganz oben stehen?

Question

Long-Zeit. Net/C#/JavaScript/andere Coder, gerade jetzt lernen Angular 2. Ich habe eine harte Zeit zu halten ng2-bootstrap Modal Code/Logik, wo ich denke es gehört. Meiner Meinung nach hat es keinen Sinn, gezwungen zu sein, den gesamten Modal-Login-Code in die oberste Ebene app.module.ts zu importieren und einzubinden. Ich möchte es in game.module.ts verschieben (wo es tatsächlich verwendet wird). Der einzige Weg, wie ich das Modal zum Laufen bringen kann, ist, ob in app.module.ts alles oben ist.

Wenn Sie etwas darunter finden, ist dumm oder schlechte Praxis, ich würde es auf jeden Fall zu schätzen wissen Sie würden darauf hinweisen. Ich lerne gerade A2 :-)

Hier ist ein Beispiel dafür, was für mich arbeiten ...

// ---------------------------------------------------------------------- 
// 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'; 
    } 
} 

Es folgt, wie ich bin versucht, die App, weil es zu bauen macht mehr Sinn für mich, dass das Login Modal-Zeug unter game.component.ts sein sollte, wo es tatsächlich verwendet wird.

Hier ist ein Beispiel dafür, was NICHT funktioniert (Fehler unten) für mich. Die einzigen Änderungen bewegen sich die Anmeldung Modal Stücke aus AppModule nach unten in 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 { 

} 

Dies ist der Fehler in Chrome Konsole mit obigem Code ...

Answer 1

1) entfernen GameComponent von declarations Array Ihren AppModule

2) Import 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) Import NgbModalModule-GameModulengbModalContainer Richtlinie arbeiten

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 {} 

Ich empfehle Ihnen zu tun, auch zu Lesen Sie diese zwei Artikel:

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