在Angular2路由器出口中加载外部URL [英] Loading External URL in Angular2 router-outlet

问题描述

我正在使用Angular2开发应用程序. 我有一个带有以下模板的组件:

I am developing an application using Angular2. I have a component with the following template:

<div>
  <router-outlet></router-outlet>
</div>

有人可以帮助我如何在此div中加载外部网址"www.example.com"吗?

Can someone please help me how to load an external URL 'www.example.com' in this div?

推荐答案

只需使用路由配置创建要在<ng-outlet>内部呈现的组件. 然后，您内部的组件模板应该有一个<iframe>指向您的外部站点.

Just create a component to render inside <ng-outlet> by using the routing config. Then you component template inside should have an <iframe> pointing to your external site.

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'app-external-page',
    templateUrl: './external-page.component.html',
    styleUrls: ['./external-page.component.css']
})

export class ExternalPageComponent implements OnInit {

    title = 'app works!';

    constructor(private _stellarService: StellarService) {
    }

    ngOnInit(): void {
    }

}

然后您的组件模板应该看起来像

Then your component template should look like

<div>
    <iframe src="yourexternalpage url"></iframe>
</div>

具有与上面的代码相同的代码，只有在路由中配置路由时，剩下的步骤.

Having a code like the one above, only remaining step if to configure a route in your routing.

这篇关于在Angular2路由器出口中加载外部URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！