Angular2 - wyświetlanie modala

Odpowiedz Nowy wątek
Wesoły Terrorysta
2017-03-17 14:53
Wesoły Terrorysta
0

Witam
Do aplikacji w Angular 2 zrobiłem modala jak poniżej. Jeżeli teraz dodam sobie ten komponent na stronie głównej to mogę go wyświetlić poprzez show(). Problem w tym, że w takim układzie po jego wyrenderowaniu i wyświetleniu cały kod zostaje dodany na stałe do strony głównej. Chciałbym natomiast taki komponent lub podobne wyświetlać w swojej aplikacji dosyć często i takie coś powodowałoby nawarstwienie się tego kodu do momentu przeładowania strony. W jaki sposób wyświetlać taki modal, żeby po jego zamknięciu ten kod nie pozostawał (jak zrobić dispose takiego komponentu)?

 <div 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">
        <div class="app-modal-header">
          <h3>Grupy<span class="glyphicon glyphicon-remove pull-right" (click)="hide()" aria-hidden="true"></span></h3>
        </div>
      </div>
      <div class="modal-body">
        <div class="app-modal-body">
          <div class="row">
              <group-editable-form *ngFor="let group of groups" [group]="group"></group-editable-form>
          </div>
        </div>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>
 import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { GroupsService } from '../groups.service';
import { Group } from '../group';

@Component({
  selector: 'groups-manager',
  templateUrl: './groups-manager.component.html',
  styleUrls: ['./groups-manager.component.css']
})
export class GroupsManagerComponent implements OnInit {
    groups: any[];
    selectedGroup: Group;
    groupsService: GroupsService;

    public visible = false;
    private visibleAnimate = false;

    constructor(private _fb: FormBuilder, _groupsService: GroupsService) {
        this.groupsService = _groupsService;
    }

    ngOnInit() {
        this.groupsService.getGroups()
            .subscribe(groups => this.groups = groups);
    }

    public show(): void {
        this.visible = true;
        setTimeout(() => this.visibleAnimate = true);
    }

    public hide(): void {
        this.visibleAnimate = false;
        setTimeout(() => this.visible = false, 300);
    }
}

Pozostało 580 znaków

2017-03-18 12:54

Rejestracja: 5 lat temu

Ostatnio: 1 dzień temu

0

https://github.com/nakupanda/bootstrap3-dialog

Pozostało 580 znaków

Odpowiedz

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0