Angular嵌入iframe出现自嵌套且下方元素不可见问题求助

核心问题原因 #

• 路由配置存在语法错误，导致/widget路径匹配失败触发全匹配重定向规则，iframe加载/widget时自动跳转回首页，首页内又包含iframe，形成无限嵌套循环
• 组件模板书写不规范，Angular组件模板不需要完整的<html>、<body>标签，重复插入根DOM节点会导致浏览器解析DOM结构错乱
• 模板指令、属性存在多处语法错误，导致元素渲染、显示逻辑异常

分步修复操作 #

1. 修复路由配置语法错误 #

修正app-routing.module.ts中多余的闭合括号，修改后代码如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { WidgetComponent } from './widget/widget.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'widget', component: WidgetComponent },
    { path: '**', redirectTo: '' }
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

2. 修正Home组件模板语法与结构 #

删除组件模板内多余的<html>、<body>标签，补全*ngIf指令的星号、style属性的等号，添加iframe闭合标签，同时给src加上属性绑定标识，调整后home.component.html代码如下：

<iframe [src]="iFrameUrl" *ngIf="displayIFrame" style="height:80%; width:80%; z-index:20; position:absolute; background: white" id="IFrameTest"></iframe>
<button (click)="onOpenIFrame()">Open IFrame</button>

3. 修正TS文件的生命周期钩子大小写 #

将home.component.ts中实现的Oninit修正为标准大写格式OnInit，修改后代码如下：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';  

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
    iFrameUrl!: SafeResourceUrl;
    displayIFrame = false;
    constructor(private sanitizer: DomSanitizer){  }
    ngOnInit(): void {
    }
    onOpenIFrame(): void{
        this.iFrameUrl = this.sanitizer.bypassSecurityTrustResourceUrl('/widget');
        this.displayIFrame = true;
    }
}

后续嵌入Sharepoint可选优化 #

如果打包部署后嵌入Sharepoint出现跨域拦截问题，可在Angular应用的index.html头部添加允许嵌入的相关响应头配置，同时在Sharepoint后台配置站点允许嵌入的域名即可。

内容的提问来源于stack exchange，提问作者CodingNub