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);
}
}