angular - Kuinka avata komponentti laiskasti ladatusta moduulista NgbModalissa?

Minulla on ongelma yrittäessäni ladata dynaamista komponenttia laiskasti ladatusta moduulista. Tarkemmin sanottuna yritän avata kirjautumiskomponentin modaalissa (https://ng-bootstrap.github.io/#/components/modal/examples) sen sijaan, että avaisin sen erillisellä sivulla, samalla kun säilytän erillisen kirjautumisreitityksen/sivun ennallaan.

Nyt, yksi vaihtoehto, joka näyttää minusta olevan, että minun täytyy ladata kirjautumiskomponentti innokkaasti app-moduulissa, mikä ei ole muuta kuin väliaikainen temppu. Joten en halua tätä ratkaisua.

Olen yrittänyt käyttää komponenttia suoraan, mutta kuten odotin, se antoi minulle seuraavan virheen:

Ei löydetty komponenttitehdasta SigninComponentille. Lisäsitkö sen @NgModule.entryComponents?

Etsin ja löysin tämän linkin: https://github.com/angular/angular/issues/14324 mutta en saa sitä toimimaan.

Olen yllättynyt, etten pystynyt löytämään sopivaa ratkaisua tähän ongelmaan, koska tämä on hyvin yleinen käyttötapaus. Kaikki apu tai ehdotukset ovat tervetulleita. Kiitos!

Vastaus #1

Komponentit, joita ei käytetä suoraan malleissa niiden valitsimen kautta, on lisättävä moduulin entryComponents-taulukkoon @NgModule-koristeessa. Kun avaat modaalin bootstrapissa, et oikeastaan käytä komponentin valitsinta missään, joten SignInComponent on yksi tällainen esimerkki.

Tekisit jotain tällaista

@NgModule({
    //...
    declarations: [
        SignInComponent,
    ],
    entryComponents: [
        SignInComponent,
    ]
})
export class LazyLoadedModule {
}

merkitä komponentti käännettäväksi, vaikka sitä ei viitata minkään muun komponentin templatessa sen valitsimen kautta.

Voit lukea lisää sisäänottokomponenteista, siitä, miten ne toimivat ja miksi sinun täytyy ilmoittaa ne tällä tavalla virallisissa Angular-dokumenteissa täällä. Sekä tästä StackOverflow-kirjoituksesta.

Vastaus #2

Tässä on, kuinka onnistuin tekemään mitä haluat tehdä. Ajatus on, että koska kirjautumiskomponentti on laiskassa moduulissa, ja koska laiskat moduulit ladataan reitittimen toimesta siirryttäessä joillekin reiteille, sinun täytyy siirtyä modaalin sisällä reitille, joka lataa laiskan moduulin ja näyttää kirjautumiskomponentin. Tämä voidaan tehdä nimetyllä reititysaukolla. En ole kovin kokenut nimettyjen reititysaukkojen kanssa, joten saattaa olla joitakin asioita hiottavana, mutta näyttää siltä, että se toimii.

Joten, olettaen että sinulla on lazy-moduuli LoginModule, jossa on tyhjän polun reitti, joka näyttää kirjautumiskomponentin, tässä on, miten juurimoduulin reitit voidaan määritellä:

export const ROUTES: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'login', 
    loadChildren: './login/login.module#LoginModule'
  },
  { 
    path: 'modal-login',
    component: ModalLoginShellComponent, 
    outlet: 'modal', 
    children: [
       {
         path: '',
         loadChildren: './login/login.module#LoginModule'
       }
    ]
  }
];

Kotikomponentilla olisi linkki, joka mahdollistaisi ModalLoginComponentin avaamisen modalin sisällä (kuten ng-bootstrap-esimerkissä on esitetty). Tämän ModalLoginComponentin malli näyttäisi tältä:

<div class="modal-header">
  <h4 class="modal-title">Hi there!</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">
  <router-outlet name="modal"></router-outlet>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

Tärkeä osa on

<router-outlet name="modal"></router-outlet>

Se sallii modaalin sisällä navigoida reittiin, ja erityisesti reittiin, joka lataisi laiskan moduulin.

ModalLoginComponentin koodi sisältäisi seuraavan ngOnInit()-metodin, joka käynnistäisi navigoinnin:

ngOnInit() {
  this.router.navigate([{outlets: {'modal': ['modal-login']}}]);
}

Tämä siis lataa ModalLoginShellComponentin ja sen oletusarvoisen laiskasti ladatun alireitin modaalin sisällön sisälle. ModalLoginShellComponent on tyhmä komponentti, joka ei tee mitään, ja jolla on vain mallipohjana

<router-outlet></router-outlet>