2
私は若干の問題があります。角度2 - エラー：（SystemJS）最大コールスタックサイズ超過（...）
エラー：（SystemJS）最大コールスタックサイズ超過（...）
を私はコンポーネントを持っています私は別のモジュールをインポート場所：あなたは、私はギャラリーのモジュールをインポートしています見ることができるように
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { VideosComponent } from './videos.component';
import { EditorModule, SharedModule, ButtonModule } from 'primeng/primeng';
import { GalleryModule } from '../../components/gallery/gallery.module';
@NgModule({
imports: [CommonModule, SharedModule, EditorModule, SharedModule, ButtonModule, GalleryModule],
declarations: [VideosComponent],
exports: [VideosComponent],
providers: []
})
export class VideosModule { }
：ここ をvideos.module.tsです。これを取り除くと、エラーは消えてしまいます。 ウサギの穴を通し続けます。ここで
はギャラリーgallery.module.tsである：ここで
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ViewerComponent } from '../viewer/viewer.component';
import { GalleryComponent } from './gallery.component';
@NgModule({
imports: [BrowserModule, FormsModule, HttpModule],
declarations: [GalleryComponent, ViewerComponent],
exports: [GalleryModule],
providers: []
})
export class GalleryModule { }
は、私はそれを削除した場合でもので、私はビューワ部には含まれませんgallery.component.ts
import {Component, NgZone, ViewChild, ElementRef} from '@angular/core';
import {Http, Response} from '@angular/http';
import { ViewerComponent } from '../viewer/viewer.component';
import 'rxjs/Rx';
interface IImage {
url: string;
thumbnail: string;
date: string;
width: number;
height: number;
}
@Component({
selector: 'sd-gallery',
templateUrl: 'gallery.component.html',
styleUrls: ['gallery.component.css']
})
export class GalleryComponent {
@ViewChild('galleryContainer') galleryContainer: ElementRef;
@ViewChild('asyncLoadingContainer') asyncLoadingContainer: ElementRef;
thumbnailBasePath = 'assets/img/gallery/preview_xxs/';
currentIdx: number = 0;
galleryBasePath: string = 'assets/img/gallery/';
showBig: boolean = false;
images: any[] = [{ url: '' }];
gallery: any[] = [];
imgIterations = 1;
allImagesLoaded = false;
// TypeScript public modifiers
constructor(private _ngZone: NgZone, private http: Http) {
}
private ngAfterContentInit() {
this.fetchDataAndRender();
}
private fetchDataAndRender() {
this.http.get(this.galleryBasePath + 'data.json')
.map((res: Response) => res.json())
.subscribe(
data => {
this.images = data;
this.render();
},
err => console.error(err),
() => undefined);
}
private render() {
let tempRow = [this.images[0]];
let rowIndex = 0;
let i = 0;
for (i; i < this.imgIterations && i < this.images.length; i++) {
while (this.images[i + 1] && this.shouldAddCandidate(tempRow, this.images[i + 1])) {
i++;
}
if (this.images[i + 1]) {
tempRow.pop();
}
this.gallery[rowIndex++] = tempRow;
tempRow = [this.images[i + 1]];
}
this.scaleGallery();
if (i >= this.images.length) {
this.allImagesLoaded = true;
} else {
this.checkForAsyncReload();
}
}
private shouldAddCandidate(imgRow: IImage[], candidate: IImage): boolean {
let oldDifference = this.calcIdealHeight() - this.calcRowHeight(imgRow);
imgRow.push(candidate);
let newDifference = this.calcIdealHeight() - this.calcRowHeight(imgRow);
return Math.abs(oldDifference) > Math.abs(newDifference);
}
private calcRowHeight(imgRow: IImage[]) {
let xsum = this.calcOriginalRowWidth(imgRow);
let ratio = this.getGalleryWidth()/xsum;
let rowHeight = imgRow[0].height * ratio;
return rowHeight;
}
private scaleGallery() {
this.gallery.forEach((imgRow) => {
let xsum = this.calcOriginalRowWidth(imgRow);
if (imgRow !== this.gallery[this.gallery.length - 1]) {
let ratio = this.getGalleryWidth()/xsum;
imgRow.forEach((img: any) => {
img.width = img.width * ratio;
img.height = img.height * ratio;
})
}
})
}
private calcOriginalRowWidth(imgRow: IImage[]) {
let xsum = 0;
imgRow.forEach((img) => {
let individualRatio = this.calcIdealHeight()/img.height;
img.width = img.width * individualRatio;
img.height = this.calcIdealHeight();
xsum += img.width + 1;
});
return xsum;
}
private calcIdealHeight() {
return (this.getGalleryWidth()/8) + 70;
}
private openImageViewer(img: any) {
this.showBig = undefined;
this.showBig = true;
this.currentIdx = this.images.indexOf(img);
}
private getGalleryWidth() {
if (this.galleryContainer.nativeElement.clientWidth === 0) {
// IE11
return this.galleryContainer.nativeElement.scrollWidth;
}
return this.galleryContainer.nativeElement.clientWidth;
}
private checkForAsyncReload() {
if (!this.allImagesLoaded) {
var loadingDiv: any = this.asyncLoadingContainer.nativeElement;
var elmTop = loadingDiv.getBoundingClientRect().top;
var elmBottom = loadingDiv.getBoundingClientRect().bottom;
var isVisible = (elmTop >= 0) && (elmBottom <= window.innerHeight);
if (isVisible) {
this.imgIterations += 5;
this.fetchDataAndRender();
}
}
}
private onClose() {
this.showBig = false;
}
private onResize() {
this.render();
}
}
ですギャラリーのhtml/moduleから、私はまだ同じ問題を抱えています。
ありがとうございます！ここで
- 完全な例外の画像です： https://postimg.org/image/fmf7qzksn/
Hey Pete、私はあなたの記事をStackoverflow（https://github.com/BenjaminBrandmeier/ng2imggallery）に私のAngular 2イメージギャラリーについて投稿したことを理解しました。ステファンのおかげで既に助けを見つけたようです。より多くの問題が発生した場合は、GitHubで問題を自由に作成してください。私は喜んで支援します。 –