在 Angular2 路由器插座中加载外部 URL [英] Loading External URL in Angular2 router-outlet
本文介绍了在 Angular2 路由器插座中加载外部 URL的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 Angular2 开发应用程序.我有一个带有以下模板的组件:
<路由器插座></路由器插座>
有人可以帮助我如何在此 div 中加载外部 URLwww.example.com"?
解决方案
只需使用路由配置创建一个组件以在
内部呈现.然后你的组件模板里面应该有一个 指向你的外部站点.
import {Component, OnInit} from '@angular/core';@成分({选择器:'app-external-page',templateUrl: './external-page.component.html',styleUrls: ['./external-page.component.css']})导出类 ExternalPageComponent 实现 OnInit {title = '应用程序有效!';构造函数(私有_stellarService:StellarService){}ngOnInit(): 无效 {}}
那么你的组件模板应该是这样的
<iframe src="yourexternalpage url"></iframe>
有一个类似上面的代码,剩下的步骤就是在你的路由中配置路由.
I am developing an application using Angular2. I have a component with the following template:
<div>
<router-outlet></router-outlet>
</div>
Can someone please help me how to load an external URL 'www.example.com' in this div?
解决方案
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屋!
查看全文