首页 > 代码库 > angular2中使用iframe及前端路由踩坑未解决

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="http://www.mamicode.com/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="http://www.mamicode.com/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的现象,那是肯定的,所以我就不写了。

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

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