type script+angular， 怎么在home页面内部嵌入一个外部页面，https://view-dev2.tkelevator.com.cn/login.php?position=new&ms_action=msLogin， 类库有哪些

在TypeScript和Angular项目中，要在Home页面内嵌入一个外部页面，通常我们会使用Angular的内置服务如`HttpClient`或第三方库如`iframe-ng`来实现异步加载外部内容。以下是步骤：

1. 首先，你需要安装`iframe-ng`库（如果还没有安装）：

ng add iframe-ng

这会将`iframe-ng`添加到你的项目中。

2. 然后，在你的组件类（假设是`HomeComponent`）中，注入`IframeService`:

import { Component, OnInit } from '@angular/core';
import { IFrameService } from 'iframe-ng';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  private externalUrl = 'https://view-dev2.tkelevator.com.cn/login.php?position=new&ms_action=msLogin';

  constructor(private iframeService: IFrameService) { }

  ngOnInit(): void {
    // 使用iframeService动态创建并插入iframe
    this.iframeService.create({
      src: this.externalUrl,
      height: '500px', // 自定义高度
      width: '100%', // 自定义宽度
      name: 'externalContent', // 给iframe命名便于后续操作
      style: {
        border: 'none', // 移除边框
        margin: '0 auto' // 居中显示
      }
    }).then((iframe) => {
      // 当iframe加载完成时，你可以获取其内容区域
      console.log('IFrame loaded:', iframe.contentDocument);
    });
  }
}

3. 在`home.component.html`中添加`iframe`标签，并应用从`iframeService`获取的`iframe`元素：

<iframe #myIframe [src]="externalUrl" [attr.name]="iframeService.iframeName"></iframe>
<!-- 在这里可以添加一些样式，比如使用ngStyle指令 -->
<ng-template #dynamicContent let-content="content">
  <div *ngIf="content.document.readyState === 'complete'" [innerHTML]="content.document.body.innerHTML">
    <!-- 显示嵌入内容 -->
  </div>
</ng-template>
<button (click)="iframeService.loadIntoDynamicContainer(myIframe)">查看嵌入内容</button>
<ng-container *ngTemplateOutlet="dynamicContent; context: { content: iframeService.getLoadedContent('externalContent') }"></ng-container>

这样当你点击按钮时，外部页面就会被加载并在内部显示。