英文:
How to show alternative text if Iframe can't load the resource at src in Angular
问题
I have a running Angular 12 application and I am implementing a behavior where I need to fetch the content from an external site and display it inside the modal popup. I am using <iframe src="url"> to fetch the content from a separate application. If the website server is running, I can successfully fetch the content and display it inside the modal.
但是，如果服务器宕机，会显示以下错误信息：
localhost connection refused
我想要实现一种行为，即如果服务器宕机，而不是显示 "localhost connection refused"，在模态框中显示消息 "服务器宕机"。
display-content.component.ts
contentUrl: string;
serverDown: string;
constructor(private sanitizer: DomSanitizer) { }
ngOnInit(): void {
const url = "http://localhost:5000/getContents";
this.contentUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
onIframeError(event) {
console.log('iframe failed');
}
display-content.component.html
<iframe [src]="contentUrl" frameborder="0" class="content" (load)="onIframeError($event)"></iframe>
<p *ngIf="serverDown">服务器宕机</p>
英文:
I have a running Angular 12 application and I am implementing a behavior where I need to fetch the content from external site and display inside the modal popup. I am using <iframe src="url"> to fetch the content from separate application. If the website server is on, I am able to fetch the content and display inside the modal.
But, if the server is down, its showing:
localhost connection refused
I want to implement a behavior where if the server is down; show the legend "Server is down" in the modal instead of localhost connection refused.
display-content.component.ts
contentUrl: string;
serverDown: string;
constructor(private sanitizer: DomSanitizer) { }
ngOnInit(): void {
const url= "http://localhost:5000/getContents";
this.contentUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
onIframeError(event) {
console.log('iframe failed');
}
display-content.component.html
<iframe [src]="contentUrl " frameborder="0" class="content" (load)="onIframeError($event)"></iframe>
<p *ngIf="serverDown">Server is down</p>
答案1
得分: 2
以下是代码的中文翻译部分：
display-content.component.ts
contentUrl: string;
serverDown: boolean | undefined;
constructor(private sanitizer: DomSanitizer, private _http: HttpClient) {
const url= "http://localhost:5000/getContents";
this.contentUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
this._http.get(url, { observe: 'response' })
.pipe(first())
.subscribe(resp => {
if (resp.status === 200 ) {
this.serverDown = false;
} else {
this.serverDown = true;
}
}, err => this.serverDown = true);
}
display-content.component.html
<iframe *ngIf="serverDown === false" [src]="contentUrl " frameborder="0" class="content"></iframe>
<img src="loadingImage" *ngIf="serverDown === undefined"/>
<p *ngIf="serverDown">Server is down</p>
希望这对你有帮助。如果有其他问题，请随时提出。
英文:
you can try this :
display-content.component.ts
contentUrl: string;
serverDown: boolean | undefined;
constructor(private sanitizer: DomSanitizer, private _http: HttpClient) {
const url= "http://localhost:5000/getContents";
this.contentUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
this._http.get(url, { observe: 'response' })
.pipe(first())
.subscribe(resp => {
if (resp.status === 200 ) {
this.serverDown = false;
} else {
this.serverDown = true;
}
}, err => this.serverDown = true);
}
display-content.component.html
<iframe *ngIf="serverDown === false" [src]="contentUrl " frameborder="0" class="content"></iframe>
<img src="loadingImage" *ngIf="serverDown === undefined"/>
<p *ngIf="serverDown">Server is down</p>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论