109 views

Angular 2.0 en Modal Dialog

Hosted by Code Expert
angular

Ik ben op zoek naar enkele voorbeelden van hoe je een bevestigingsmodaal dialoogvenster in Angular 2.0 kunt maken. Ik heb het Bootstrap-dialoogvenster voor Angular 1.0 gebruikt en kon geen voorbeelden op internet vinden voor Angular 2.0. Ik heb ook hoekige 2.0-documenten gecontroleerd zonder geluk.

Is er een manier om het Bootstrap-dialoogvenster te gebruiken met Angular 2.0?

Antwoord 1, autoriteit 100%

  • Hoek 2 en hoger
  • Bootstrap css (animatie blijft behouden)
  • GEEN JQuery
  • GEEN bootstrap.js
  • Ondersteunt aangepaste modale inhoud(net als geaccepteerd antwoord)
  • Onlangs ondersteuning toegevoegd voor meerdere modals boven elkaar.

`

@Component({
  selector: 'app-component',
  template: `
  <button type="button" (click)="modal.show()">test</button>
  <app-modal #modal>
    <div class="app-modal-header">
      header
    </div>
    <div class="app-modal-body">
      Whatever content you like, form fields, anything
    </div>
    <div class="app-modal-footer">
      <button type="button" class="btn btn-default" (click)="modal.hide()">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </app-modal>
  `
})
export class AppComponent {
}
@Component({
  selector: 'app-modal',
  template: `
  <div (click)="onContainerClicked($event)" class="modal fade" tabindex="-1" [ngClass]="{'in': visibleAnimate}"
       [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <ng-content select=".app-modal-header"></ng-content>
        </div>
        <div class="modal-body">
          <ng-content select=".app-modal-body"></ng-content>
        </div>
        <div class="modal-footer">
          <ng-content select=".app-modal-footer"></ng-content>
        </div>
      </div>
    </div>
  </div>
  `
})
export class ModalComponent {
  public visible = false;
  public visibleAnimate = false;
  public show(): void {
    this.visible = true;
    setTimeout(() => this.visibleAnimate = true, 100);
  }
  public hide(): void {
    this.visibleAnimate = false;
    setTimeout(() => this.visible = false, 300);
  }
  public onContainerClicked(event: MouseEvent): void {
    if ((<HTMLElement>event.target).classList.contains('modal')) {
      this.hide();
    }
  }
}

Om de achtergrond weer te gevenheb je zoiets als deze CSS nodig:

.modal {
  background: rgba(0,0,0,0.6);
}

Het voorbeeld staat nu meerdere modaliteiten tegelijk toe. (zie de onContainerClicked()methode).

Voor Bootstrap 4 css-gebruikersmoet u 1 kleine wijziging aanbrengen (omdat een css-klassenaam is bijgewerkt vanaf Bootstrap 3). Deze lijn:
[ngClass]="{'in': visibleAnimate}"moet worden gewijzigd in:
[ngClass]="{'show': visibleAnimate}"

Ter demonstratie is hier een plunkr

Antwoord 2, autoriteit 28%

Hier is een behoorlijk goed voorbeeld van hoe je de Bootstrap-modal kunt gebruiken in een Angular2-app op GitHub.

De essentie is dat je de bootstrap html en jQuery initialisatie in een component kunt inpakken. Ik heb een herbruikbare modalcomponent gemaakt waarmee je een open kunt activeren met behulp van een sjabloonvariabele.

<button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button>
<modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">I'm a modal!</h4>
    </modal-header>
    <modal-body>
        Hello World!
    </modal-body>
    <modal-footer [show-default-buttons]="true"></modal-footer>
</modal>

U hoeft alleen het npm-pakket te installeren en de modale module in uw app-module te registreren:

import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';
@NgModule({
    imports: [Ng2Bs3ModalModule]
})
export class MyAppModule {}

Antwoord 3, autoriteit 23%

Dit is een eenvoudige benadering die niet afhankelijk is van jQuery of een andere bibliotheek behalve Angular 2.
Het onderstaande onderdeel (errorMessage.ts) kan worden gebruikt als een onderliggende weergave van elk ander onderdeel. Het is gewoon een bootstrap-modal die altijd open of getoond is. De zichtbaarheid wordt bepaald door de ngIf-instructie.

errorMessage.ts

import { Component } from '@angular/core';
@Component({
    selector: 'app-error-message',
    templateUrl: './app/common/errorMessage.html',
})
export class ErrorMessage
{
    private ErrorMsg: string;
    public ErrorMessageIsVisible: boolean;
    showErrorMessage(msg: string)
    {
        this.ErrorMsg = msg;
        this.ErrorMessageIsVisible = true;
    }
    hideErrorMsg()
    {
        this.ErrorMessageIsVisible = false;
    }
}

errorMessage.html

<div *ngIf="ErrorMessageIsVisible" class="modal fade show in danger" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Error</h4>
            </div>
            <div class="modal-body">
                <p>{{ErrorMsg}}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" (click)="hideErrorMsg()">Close</button>
            </div>
        </div>
    </div>
</div>

Dit is een voorbeeld van ouderlijk toezicht (sommige niet-relevante code is voor de beknoptheid weggelaten):

ouder.ts

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/common';
import {Router, RouteSegment, OnActivate, ROUTER_DIRECTIVES } from '@angular/router';
import { OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
@Component({
    selector: 'app-application-detail',
    templateUrl: './app/permissions/applicationDetail.html',
    directives: [ROUTER_DIRECTIVES, ErrorMessage]  // Note ErrorMessage is a directive
})
export class ApplicationDetail implements OnActivate
{
    @ViewChild(ErrorMessage) errorMsg: ErrorMessage;  // ErrorMessage is a ViewChild
    // yada yada
    onSubmit()
    {
        let result = this.permissionsService.SaveApplication(this.Application).subscribe(x =>
        {
            x.Error = true;
            x.Message = "This is a dummy error message";
            if (x.Error) {
                this.errorMsg.showErrorMessage(x.Message);
            }
            else {
                this.router.navigate(['/applicationsIndex']);
            }
        });
    }
}

ouder.html

<app-error-message></app-error-message>
// your html...

Antwoord 4, autoriteit 5%

Nu beschikbaar als NPM-pakket

hoekig-custom-modal

@Stephen Paul vervolg…

  • Angular 2 en hoger Bootstrap css (animatie blijft behouden)
  • GEEN JQuery
  • GEEN bootstrap.js
  • Ondersteunt aangepaste modale inhoud
  • Ondersteuning voor meerdere modals bovenop elk
    andere.
  • Gemoduleerd
  • Scroll uitschakelen wanneer modal is geopend
  • Modal wordt vernietigd als je weg navigeert.
  • Luie inhoudsinitialisatie, die ngOnDestroy(ed) krijgt wanneer de modal wordt afgesloten.
  • Scrolling door ouders uitgeschakeld wanneer modaal zichtbaar is

Luie inhoudsinitialisatie

Waarom?

In sommige gevallen wilt u misschien niet modaal gebruiken om de status te behouden nadat deze is gesloten, maar eerder herstellen naar de oorspronkelijke status.

Oorspronkelijk modaal probleem

Als u de inhoud rechtstreeks in de weergave doorgeeft, wordt deze daadwerkelijk geïnitialiseerd nog voordat de modaliteit deze ontvangt. De modal heeft geen manier om dergelijke inhoud te doden, zelfs niet als er een *ngIf-wrapper wordt gebruikt.

Oplossing

ng-template. ng-templatewordt niet weergegeven totdat dit wordt gevraagd.

My-COMPONENT.MODULE.TS 

...
imports: [
  ...
  ModalModule
]

My-component.ts 

<button (click)="reuseModal.open()">Open</button>
<app-modal #reuseModal>
  <ng-template #header></ng-template>
  <ng-template #body>
    <app-my-body-component>
      <!-- This component will be created only when modal is visible and will be destroyed when it's not. -->
    </app-my-body-content>
    <ng-template #footer></ng-template>
</app-modal>

Modal.comPonent.ts 

export class ModalComponent ... {
  @ContentChild('header') header: TemplateRef<any>;
  @ContentChild('body') body: TemplateRef<any>;
  @ContentChild('footer') footer: TemplateRef<any>;
 ...
}

Modal.comPonent.html 

<div ... *ngIf="visible">
  ...
  <div class="modal-body">
    ng-container *ngTemplateOutlet="body"></ng-container>
  </div>

referenties

Ik moet zeggen dat het niet mogelijk zou zijn geweest zonder de uitstekende officiële en communautaire documentatie rond het net. Het kan ook van jullie helpen om beter te begrijpen hoe ng-template, *ngTemplateOutleten @ContentChildwerken.

https://angular.io/api/common/ngtempletlet
https://blog.angular-university.io/angular- NG-sjabloon-ng-container-ngtempletlet /
https://medium.com/claritydesignsystem/ng-content-the-hidden -docs-96a29d70d11b
https://netbasal.com/understanding-viewchildren-contentchildren-and -querylist-in-angular-896b0c689f6e
https://netbasal.com/understanding-viewchildren-contentchildren-and -querylist-in-angular-896b0c689f6e

Volledige oplossing voor kopiëren en plakken

modal.component.html

<div
  (click)="onContainerClicked($event)"
  class="modal fade"
  tabindex="-1"
  [ngClass]="{'in': visibleAnimate}"
  [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}"
  *ngIf="visible">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <ng-container *ngTemplateOutlet="header"></ng-container>
        <button class="close" data-dismiss="modal" type="button" aria-label="Close" (click)="close()">×</button>
      </div>
      <div class="modal-body">
        <ng-container *ngTemplateOutlet="body"></ng-container>
      </div>
      <div class="modal-footer">
        <ng-container *ngTemplateOutlet="footer"></ng-container>
      </div>
    </div>
  </div>
</div>

modal.component.ts

/**
 * @Stephen Paul https://stackoverflow.com/a/40144809/2013580
 * @zurfyx https://stackoverflow.com/a/46949848/2013580
 */
import { Component, OnDestroy, ContentChild, TemplateRef } from '@angular/core';
@Component({
  selector: 'app-modal',
  templateUrl: 'modal.component.html',
  styleUrls: ['modal.component.scss'],
})
export class ModalComponent implements OnDestroy {
  @ContentChild('header') header: TemplateRef<any>;
  @ContentChild('body') body: TemplateRef<any>;
  @ContentChild('footer') footer: TemplateRef<any>;
  public visible = false;
  public visibleAnimate = false;
  ngOnDestroy() {
    // Prevent modal from not executing its closing actions if the user navigated away (for example,
    // through a link).
    this.close();
  }
  open(): void {
    document.body.style.overflow = 'hidden';
    this.visible = true;
    setTimeout(() => this.visibleAnimate = true, 200);
  }
  close(): void {
    document.body.style.overflow = 'auto';
    this.visibleAnimate = false;
    setTimeout(() => this.visible = false, 100);
  }
  onContainerClicked(event: MouseEvent): void {
    if ((<HTMLElement>event.target).classList.contains('modal')) {
      this.close();
    }
  }
}

modal.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ModalComponent } from './modal.component';
@NgModule({
  imports: [
    CommonModule,
  ],
  exports: [ModalComponent],
  declarations: [ModalComponent],
  providers: [],
})
export class ModalModule { }

Antwoord 5, autoriteit 4%

Ik gebruik ngx-bootstrapvoor mijn project.

Je kunt de demo hier

vinden

De github is hier

Hoe te gebruiken:

  1. Installeer ngx-bootstrap

  2. Importeren naar uw module

// RECOMMENDED (doesn't work with system.js)
import { ModalModule } from 'ngx-bootstrap/modal';
// or
import { ModalModule } from 'ngx-bootstrap';
@NgModule({
  imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}
  1. Eenvoudig statisch modaal
<button type="button" class="btn btn-primary" (click)="staticModal.show()">Static modal</button>
<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
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">Static modal</h4>
         <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
         <span aria-hidden="true">&times;</span>
         </button>
      </div>
      <div class="modal-body">
         This is static modal, backdrop click will not close it.
         Click <b>&times;</b> to close modal.
      </div>
   </div>
</div>
</div>

Antwoord 6, autoriteit 2%

Hier is mijn volledige implementatie van de modale bootstrap angular2-component:

Ik neem aan dat in uw hoofdindex.html-bestand (met <html>en <body>tags) onderaan <body>tag die je hebt:

 <script src="assets/js/jquery-2.1.1.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>

modal.component.ts:

import { Component, Input, Output, ElementRef, EventEmitter, AfterViewInit } from '@angular/core';
declare var $: any;// this is very importnant (to work this line: this.modalEl.modal('show')) - don't do this (becouse this owerride jQuery which was changed by bootstrap, included in main html-body template): let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');
@Component({
  selector: 'modal',
  templateUrl: './modal.html',
})
export class Modal implements AfterViewInit {
    @Input() title:string;
    @Input() showClose:boolean = true;
    @Output() onClose: EventEmitter<any> = new EventEmitter();
    modalEl = null;
    id: string = uniqueId('modal_');
    constructor(private _rootNode: ElementRef) {}
    open() {
        this.modalEl.modal('show');
    }
    close() {
        this.modalEl.modal('hide');
    }
    closeInternal() { // close modal when click on times button in up-right corner
        this.onClose.next(null); // emit event
        this.close();
    }
    ngAfterViewInit() {
        this.modalEl = $(this._rootNode.nativeElement).find('div.modal');
    }
    has(selector) {
        return $(this._rootNode.nativeElement).find(selector).length;
    }
}
let modal_id: number = 0;
export function uniqueId(prefix: string): string {
    return prefix + ++modal_id;
}

modal.html:

<div class="modal inmodal fade" id="{{modal_id}}" tabindex="-1" role="dialog"  aria-hidden="true" #thisModal>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" [ngClass]="{'hide': !(has('mhead') || title) }">
                <button *ngIf="showClose" type="button" class="close" (click)="closeInternal()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <ng-content select="mhead"></ng-content>
                <h4 *ngIf='title' class="modal-title">{{ title }}</h4>
            </div>
            <div class="modal-body">
                <ng-content></ng-content>
            </div>
            <div class="modal-footer" [ngClass]="{'hide': !has('mfoot') }" >
                <ng-content select="mfoot"></ng-content>
            </div>
        </div>
    </div>
</div>

En voorbeeld van het gebruik in client-editor component:
client-bewerk-component.ts: 

import { Component } from '@angular/core';
import { ClientService } from './client.service';
import { Modal } from '../common';
@Component({
  selector: 'client-edit',
  directives: [ Modal ],
  templateUrl: './client-edit.html',
  providers: [ ClientService ]
})
export class ClientEdit {
    _modal = null;
    constructor(private _ClientService: ClientService) {}
    bindModal(modal) {this._modal=modal;}
    open(client) {
        this._modal.open();
        console.log({client});
    }
    close() {
        this._modal.close();
    }
}

client-edit.html: 

<modal [title]='"Some standard title"' [showClose]='true' (onClose)="close()" #editModal>{{ bindModal(editModal) }}
    <mhead>Som non-standart title</mhead>
    Some contents
    <mfoot><button calss='btn' (click)="close()">Close</button></mfoot>
</modal>

Natuurlijk title, showClose, <mhead>EN <mfoot>AR FACULUTIEKE PARAMETERS / TAGEN .

Antwoord 7

Controleer AsUI-dialoogvenster die bij runtime creëert. Er is geen behoefte aan verbergen en weergeven logica. Simply Service maakt een component bij runtime met behulp van AOT
asui npm

Antwoord 8

Probeer NG-Window te gebruiken, het staat ontwikkelaar toe om te openen en volledige controle meerdere Windows in Single Page Toepassingen op eenvoudige manier, geen jQuery, geen bootstrap.

Avilable Configration

  • Maxmize venster
  • Minimaliseer venster
  • Aangepast formaat,
  • aangepaste posing
  • Het venster is sleepbaar
  • Blok het oudervenster of niet
  • midden het venster of niet
  • Pass-waarden naar venstervenster
  • Pass-waarden van Chield-venster naar ouderruit
  • Luisteren naar het sluiten van Chield-venster in oudervenster
  • Luister naar de grootte van het formaat met je aangepaste luisteraar
  • openen met maximale grootte of niet
  • Schakel venster in en schakel het wijzigen van
  • Schakel maximalisatie

    • in en uit

  • Schakel minimalisatie in en uitschakelen

Antwoord 9

hoekige 7 + ngbootstrap

Een eenvoudige manier van openen van modal van hoofdcomponent en passerend resultaat eraan. is wat ik wilde. Ik heb een stapsgewijze tutorial gemaakt die een nieuw project helemaal bereikbaar is, dat NGBootstrap en creatie van modal installeert. Je kunt het klonen of de gids volgen.

Ik hoop dat dit nieuw helpt bij het hoekig.!

https://github.com/wkaczurba/modal-demo

Details:

modal-simple sjabloon (modal-simple.component.html):

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Are you sure?</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>You have not finished reading my code. Are you sure you want to close?</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('yes')">Yes</button>
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('no')">No</button>
  </div>
</ng-template>

De modal-simple.component.ts:

import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
  selector: 'app-modal-simple',
  templateUrl: './modal-simple.component.html',
  styleUrls: ['./modal-simple.component.css']
})
export class ModalSimpleComponent implements OnInit {
  @ViewChild('content') content;
  @Output() result : EventEmitter<string> = new EventEmitter();
  constructor(private modalService : NgbModal) { }
  open() {
    this.modalService.open(this.content, {ariaLabelledBy: 'modal-simple-title'})
      .result.then((result) => { console.log(result as string); this.result.emit(result) }, 
        (reason) => { console.log(reason as string); this.result.emit(reason) })
  }
  ngOnInit() {
  }
}

Demo ervan (app.component.html) – eenvoudige manier om met terugkeergebeurtenis om te gaan:

<app-modal-simple #mymodal (result)="onModalClose($event)"></app-modal-simple>
<button (click)="mymodal.open()">Open modal</button>
<p>
Result is {{ modalCloseResult }}
</p>

app.component.ts – onModalClosed wordt uitgevoerd zodra modal is gesloten:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  modalCloseResult : string;
  title = 'modal-demo';
  onModalClose(reason : string) {
    this.modalCloseResult = reason;
  }    
}

Proost

Previous articlePython lijst / sublijst selectie -1 gekheid
Next articleHoe doe ik Top 1 in Oracle?

Other episodes

Kan ik de stappen van een mat-horizontale-stepper programmatisch verplaatsen in Angular / Angular Material

angular Code Expert - 0
Ik heb een vraag over Angular Material (met Angular 4+). Stel dat ik in mijn componentsjabloon een <mat-horizontal-stepper>component toevoeg, en binnen elke stap <mat-step>heb...
Read more

Hoe hernoem je een component in Angular CLI?

angular Code Expert - 0
Is er een snelkoppeling om een ​​component te hernoemen met de Angular CLI, behalve het handmatig bewerken van alle componentbestanden, zoals mapnaam, .css, .ts,...
Read more

Een body toevoegen aan de Angular HttpClient-verwijderfunctie

angular Code Expert - 0
Ons project migreert naar Angular4en gebruikt @angular/common/http Httpclientals de standaard netwerktool. Maar ik ontdekte dat er geen bodyparams zijn in de verwijderfunctie. Hoe voeg...
Read more

Angular ngx-translate gebruik in typoscript

angular Code Expert - 0
Ik gebruik deze @ngx-translate/core i18n-service en het werkt prima in sjablonen (.html) met deze syntaxis: {{'my.i18n.key'|translate}} Nu wil ik iets vertalen in mijn componenttypescript-bestand (.ts),...
Read more

Gegevens verzenden via routeringspaden in Angular

angular Code Expert - 0
Is er een manier om gegevens als parameter te verzenden met router.navigate? Ik bedoel, zoiets als ditvoorbeeld, zoals je kunt zien heeft de route een...
Read more

Component maakt geen deel uit van een NgModule of de module is niet geïmporteerd in uw module

angular Code Expert - 0
Ik ben een hoekige 4-applicatie aan het bouwen. Ik krijg een foutmelding Error:Component HomeComponent is not part of any NgModule or the module has not...
Read more

*ngIf else if in template

angular Code Expert - 0
Hoe zou ik meerdere hoofdletters in een *ngIf-statement hebben? Ik ben gewend aan Vue of Angular 1 met een if, else ifen else, maar...
Read more

© Copyright - Code Expert 2021