Comment mettre en œuvre Dialogue Modale Angulaire au 2 et au-dessus

Je suis un newbie angulaire.

J'ai utilisé bootstrap modale à l'aide du package ng2-bootstrap.

Mon fichier de Vue est

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">Area Master</h4>
        <button type="button" class="close pull-right" (click)="lgModal.hide();" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Modal Content here...

      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Add</button>
      </div>
    </div>
  </div>
</div>

J'ai besoin de savoir comment faire pour afficher/masquer cette modale à partir du composant (type de fichier de script).

Type de fichier de script est

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, Validators, FormBuilder, FormControl } from '@angular/forms';
import { Area } from './area';
import { AreaService } from './area.service';
@Component({

  moduleId: module.id,
  selector: 'my-areas',
  templateUrl: './areas.component.html',
  styleUrls: ['./areas.component.css']
})

export class AreasComponent implements OnInit {
  area_form: FormGroup;
  new_area: Area;
  areas: Area[];
  @ViewChild('lgModal') lgModal:ElementRef;
  constructor(
    private areaService: AreaService,
    private router: Router,
    private form_builder: FormBuilder) { }

  getAreas(): void {
    this.areaService
      .getAreas()
      .then(areas => this.areas = areas);
  }

  submit(area: Area): void {
    console.log(area);
    this.areaService.create(area)
      .then(area => { this.areas.push(area) })
  }

  ngOnInit(): void {
    this.getAreas();
    this.lgModal.show();
    this.area_form = this.form_builder.group({
      name: ['', Validators.required],
      pincode: ['', Validators.required],
      status: ['Active'],
      type: ['Busines Service Area']
    })
  }
}

d'où le lancement de l'modal?
La réponse était utile??

OriginalL'auteur Bala Karthik | 2017-03-11

Votre enfant commun modal composant sera comme ci-dessous

import {Component,Input, ViewChild} from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';

@Component({
  selector: 'common-modal',
  template: `
   <div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">{{title}}</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <ng-content select=".modal-body"> </ng-content>
      </div>

      <div class="modal-footer">
        <div class="pull-left">
          <button class="btn btn-default" (click)="hide()"> Cancel </button>
        </div>
      </div>
    </div>
  </div>
</div>
  `,
})
export class CommonModalComponent {
   @ViewChild('childModal') public childModal:ModalDirective;
   @Input() title:string;
  constructor() {
  }
  show(){
    this.childModal.show();
  }
  hide(){
    this.childModal.hide();
  }
}

En utilisant le composant enfant dans votre composant parent sera comme ci-dessous

import {Component, ViewChild, NgModule,ViewContainerRef} from '@angular/core'
import { BrowserModule } from '@angular/platform-browser';
import { ModalDirective,ModalModule } from 'ngx-bootstrap';
import {CommonModalComponent} from './child.modal';
@Component({
  selector: 'my-app',
  template: `
    <button type="button" class="btn btn-primary" (click)="childModal.show()">Open modal</button>
    <common-modal  #childModal [title]="'common modal'"> 
    <div class="modal-body">
    Hi heloo </div>
    </common-modal> 

  `,
})
export class AppComponent {
  @ViewChild('childModal') childModal :CommonModalComponent;
  constructor(private viewContainerRef: ViewContainerRef) {
  }

}

L'aide du code ci-dessus, vous pouvez avoir une commune de la boîte de dialogue modale qui peuvent être réutilisés, de sorte que votre tête & pied de page reste la même et vous pouvez utiliser Contenu de Projection d'utiliser de modifier le corps de la boîte de dialogue modale.

DÉMONSTRATION EN DIRECT

En jouant avec le plunker, il fonctionne si AppComponent @ViewChild est commenté, mais pas si le viewContainerRef est supprimé. Qu'est-ce que viewContainerRef faire? il n'y a pas de façon évidente de l'utilisation de l'informatique dans le code. C'est la première fois que je l'ai vu mentionné dans le cadre de ModalDirective.
avez-vous besoin de l'aide de moi?
Cheers, en regardant les plunker, pourriez-vous dire ce que ViewContainerRef injecté dans le AppComponent? Je suis l'aide de ng2-bootstrap v1.3.3 avec l'importation de la syntaxe ModalModule.forRoot(), qui fournit ComponentLoaderFactory & PositioningService, mais je ne peux pas comprendre pourquoi vous injecter ViewContainerRef et si j'en ai besoin avec ma version.
pouvez vous s'il vous plaît aidez-moi avec cette requête..stackoverflow.com/questions/49535102/...

OriginalL'auteur Aravind

Ci-dessous la réponse est en référence à la dernière ng-bootstrap

Composant Contrôleur

import { TemplateRef, ViewChild } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-app-registration',
  templateUrl: './app-registration.component.html',
  styleUrls: ['./app-registration.component.css']
})

export class AppRegistrationComponent implements OnInit {

  @ViewChild('editModal') editModal : TemplateRef<any>; //Note: TemplateRef

  constructor(private modalService: NgbModal) { }

  openModal(){
    this.modalService.open(this.editModal);
  }

}

Composant HTML

<ng-template #editModal let-modal>

<div class="modal-header">
  <h4 class="modal-title" id="modal-basic-title">Edit Form</h4>
  <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div class="modal-body">
  <!-- YOUR FORM DATA -->
</div>

<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="modal.close()">Save</button>
</div>

</ng-template>

app.le module.ts

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

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...

    NgbModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

OriginalL'auteur Arjun SK

0

Maintenant (v1.8.1+), vous pouvez le faire plus facile en utilisant modal service
vous pouvez utiliser des modèles et des composants pour la création des modaux
http://valor-software.com/ngx-bootstrap/#/modals#service-section

OriginalL'auteur valorkin

Vous devez vous connecter pour publier un commentaire.