angular2中使用iframe及前端路由踩坑未解决

前次做到英雄的路由部分,有个url的问题,这次我按照教程里面的vs2015集成方式发现styleUrls: [‘./app/app.component.css‘]这次找不到了,要重新换成styleUrls: [‘app.component.css‘]。。。。你在逗我?可能是因为‘my-app‘的文件位置变了吧。

这个不管,这次主要写iframe的问题。

vs里面建立了这样一个首页

<div>
    <div>
        @Html.Partial("_LeftLayOut")
    </div>
    <div>
        <div >
            @Html.Partial("_RightTopLayOut")
        </div>
        <div >
            <iframe id="ifrcontent" frameborder="0" scrolling="auto" src="/Home/Welcome"></iframe>
        </div>
    </div>
</div>

  然后my-app元素在welcome页面里面,运行下,恩,页面出来了,但是。。。F12一下一票红。

但是页面就是出来了。。

把my-app放到iframe同级,不论先后怎么样都一样

  <my-app>Loading...</my-app>
            <iframe id="ifrcontent" frameborder="0" scrolling="auto" src="/Home/Welcome"></iframe>

问题依旧

当把iframe去掉后问题解决。。。。可这不是我想要的啊!

我就是要在iframe里面显示my-app的内容,然而不知道怎么解决。

第二坑就是angular2路由和mvc路由问题,教程里面也说了会有这样问题,可没写怎么解决。

我看到个微博是angular2和net core集成的,里面用到了

routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index" });

  

这个我查了下是core里面的才有的,在程序集 Microsoft.AspNetCore.SpaServices里面。

翻了下源码就是加了个路由,我照这样子写了个。(core里面是IRouteBuilder的扩展,我写到RouteCollection里面了,看起来是一猫一样的!)

而且我运行了一下真的解决了路由问题,然而。。只解决了一次。真的只有一次,只有我不论再怎么运行修改代码,这个路由就是不起作用,

地址栏访问http://localhost:13971/heroes,或是http://localhost:13971/dashboard就会直接404,我也是黑人问号了。

如果把这个路由放到mvc默认路由的前面,会发生更2的现象,那是肯定的,所以我就不写了。

这个到底要怎么解决,他真的成功过一次!

时间: 2024-10-15 14:00:52

angular2中使用iframe及前端路由踩坑未解决的相关文章

记录某项目中的踩坑与解决(持续更新)

前言 最近参加了某个比赛, 我所选的赛题就是个类似知乎这样的安卓app,由于着手近一个月了,踩了不少坑,之前没怎么记录,估计事后也会忘记干净. 因此特开一帖,在此记录下相关的坑. 记录 写完某个Recyclerview的item布局和相关适配器后, 然后展示的时候, 发现显示出来的Item数量小于List中绑定的数据量: 首先是检查了一遍适配器中的逻辑,发现没啥问题.然后在onCreateViewHolder中打log,发现只创建了两次就没了(而实际应该创建6次). 最后百度才发现是外面的Scr

【踩坑经历】一次Asp.NET小网站部署踩坑和解决经历

2013年给1个大学的小客户部署过一个小型的Asp.NET网站,非常小,用的sqlite数据库,今年人家说要换台服务器,要重新部署一下,好吧,虽然早就过了服务时间,但无奈谁叫人家是客户了,二话不说,上,源代码和以前的文件都有,部署还不是分分钟的事情,打开IIS挂上去就行了.谁知道,这个部署将近花了2天的时间.看看踩坑过程和解决方法. 本文原文地址:http://www.cnblogs.com/asxinyu/p/4380380.html 1.居然拿XP系统做服务器 第一个坑其实和我没关系,客户以

Angularjs 中的iframe 标签 ng-src 路径 报错问题 解决办法

iframe中的src直接替换成ng—src不可以,需要转换一下.Angular里面有个属性是专门用来解决跨域问题的 $sce. PS:$sce ($sce服务把一些地址变成安全的.授权的链接..)常用的方法有: $sce.trustAs(type,name); $sce.trustAsHtml(value); $sce.trustAsUrl(value); $sce.trustAsResourceUrl(value); $sce.trustAsJs(value);   $scope.someU

移动前端的一些坑和解决方法(外观表现)

问题描述 环境与频率 解决方法 border-radius百分比失效 Android2.3.x 设置一个较大值如border-radius:9999px placeholder属性设置的文字向上偏移的厉害 Android4.x部分机型 line-height:normal iOS5及以后版本都支持. iOS4及以下版本不支持,会当做static处理. Android 2.1 及以下版本不支持. Android 2.2 滚动过程中不保持fixed的位置,滚动完成后回到fixed的位置. Andro

踩坑 Windows 解决pip install出现“由于目标计算机积极拒绝,无法连接”的问题

解决pip install出现“由于目标计算机积极拒绝,无法连接”的问题 可能是使用某软件自动设置了代理, 所以需要手动的取消代理才可以. 在Intel选项中把所有的代理都给去掉就可以了.... 原文地址:https://www.cnblogs.com/JiangOil/p/10959632.html

JSP中EL表达式取值问题记录(未解决)

***************************2015-10-28 22:21************************* 问题描述如下: 在当前的jsp页面已经有了如下代码: <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getSe

Angular2中的路由(简单总结)

Angular2中建立路由的4个步骤: 1.路由配置:最好新建一个app.toutes.ts文件(能不能用ng命令新建有待调查) Angular2中路由要解决的是URL与页面的对应关系(比如URL是http://localhost:4200/all-people,那么页面显示的就应该是allPeople画面,URL是http://localhost:4200/first-come,页面显示的就应该是firstCome画面). 在Angular2中页面是由组件组成的(Angular2中的根模块对应

什么是前端路由

前端路由在很多开源的js类库框架中都得到支持,如angularJS,Backbone,Reactjs等等.这篇文章主要和大家谈谈什么是前端路由,以及它的使用场景及优缺点1.什么是路由简单举例说明,假如我们有一台提供 Web 服务的服务器的网络地址是:10.0.0.1,而该 Web 服务又提供了三个可供用户访问的页面,其页面 URI 分别是: http://10.0.0.1/http://10.0.0.1/abouthttp://10.0.0.1/concat那么其路径就分别是 /,/about,

Web开发中 前端路由 实现的几种方式和适用场景

浅析Web开发中前端路由实现的几种方式 主题 Web开发 故事从名叫Oliver的绿箭虾`说起,这位大虾酷爱社交网站,一天他打开了 Twitter ,从发过的tweets的选项卡一路切到followers选项卡,Oliver发现页面的内容变化了,URL也变化了,但为什么页面没有闪烁刷新呢?于是Oliver打开的网络监控器(没错,Oliver是个程序员),他惊讶地发现在切换选项卡时,只有几个XHR请求发生,但页面的URL却在对应着变化,这让Oliver不得不去思考这一机制的原因- 叙事体故事讲完,