Angular中的路由和导航2

Question

我正在阅读Angular 2的教程,并且能够启动并运行一个简单的应用程序.现在,我正在转到这里的路由和导航部分https://angular.io/docs/ts/latest/guide/router.html,但有些东西对我不起作用.

我去了Plunker的实例,并从那里下载了代码.然后,我在Visual Studio 2015中设置了一个解决方案,并插入了Plunker下载的所有代码.该应用程序完美地工作,除了一件事,导航似乎没有工作,因为文档似乎表明.

我开始使用IIS Express和Chrome浏览器在Visual Studio中调试应用程序.主页面加载正确,我可以点击危机中心和英雄的链接.当我单击链接时,组件视图正确加载,一切看起来都很完美.

现在,如果我尝试通过简单地键入URL来导航,则组件视图不会加载,我所拥有的只是一个空白页面.

例如,我开始在Visual Studio中调试应用程序,并使用URL http:// localhost:56074 /打开Chrome浏览器.主页面正确加载"组件路由器"标题和"危机中心"和"英雄"的两个链接.现在,如果我只是转到地址栏并在URL的末尾添加"/ crisis-center",使其看起来像http:// localhost:56074/crisis-center,我会得到一个空白页面.Chrome控制台显示以下错误:

获取http:// localhost:56074/crisis-center 404(未找到)导航到http:// localhost:56074/crisis-center

网络追踪清楚地显示了404危机中心.事实上,如果我使用危机中心主页面上的导航链接并点击它来显示危机中心组件视图,然后只需点击刷新按钮刷新页面,而在危机中心视图中,同样的结果发生.

这是一个Visual Studio问题吗？IIS Express？其他想法？

我们是.Net开发商店,我们的主要开发环境是Visual Studio.如果这是使用IIS Express在Visual Studio中开发Angular 2应用程序的问题,这可能是一个显示停止.

如果有人想尝试同样的事情,我可以压缩我的VS解决方案并分享.

有人尝试使用IIS Express在Visual Studio中使用Angular 2应用程序,它可以告诉我我做错了什么吗？

Answer 1

Angular 2默认使用HTML5路由,您必须通过将以下内容添加到web.config来将所有服务器请求映射到index.html

<rewrite>
    <rules>
        <rule name="redirect all" stopProcessing="true">
            <match url="^(.*)$" ignoreCase="false" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
            </conditions>
            <action type="Rewrite" url="PATH TO INDEX.HTML" appendQueryString="true" />
        </rule>
    </rules>
</rewrite>

或实现HashLocationStrategy,如在角文档描述这里

provide(LocationStrategy, {useClass: HashLocationStrategy})

Answer 2

对于此问题，您需要为您的应用程序使用 PathLocationStrategy 或 HashLocationStrategy。它可以在“angular2/router”中找到。

使用 HashLocationStrategy 的示例：

启动.ts

bootstrap(AppCmp, [
       ROUTER_PROVIDERS,
       provide(LocationStrategy, {useClass: HashLocationStrategy})
   ]);

在你的主要组件中，

class AppCmp {
          constructor(location: Location) {
          location.go(location.path());
       }

location.path() 动态给出要加载的页面的路径。