首页 文章

Angular中的路由和导航2

提问于
浏览 次
9

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

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

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

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

例如，我开始在Visual Studio中调试应用程序，Chrome浏览器打开时显示URL http://localhost:56074/ . 主页面正确加载"Component Router" Headers 和"Crisis Center"和"Heroes"的两个链接 . 现在，如果我只是转到地址栏并将"/crisis-center"添加到URL的末尾，使其看起来像http://localhost:56074/crisis-center，我会得到一个空白页面 . Chrome控制台显示以下错误：

GET 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应用程序，它可以告诉我我做错了什么吗？

angular angular2-routing

6 回答

  • 3

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

    使用HashLocationStrategy的示例：

    boot.ts

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

    在你的主要组成部分，

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

    location.path（）动态地给出要加载的页面的路径 .

    回复于
  • 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，如angular docs here中所述

    provide(LocationStrategy, {useClass: HashLocationStrategy})
    回复于
  • 0

    除了@stasivash回答：如果您在项目中的某个路径上发出ajax请求时遇到问题，例如 YOUR-DOMAIN/api/... ，我建议添加以下条件：

    <add input="{REQUEST_URI}" negate="true" pattern="^\/api\/.*$" ignoreCase="true" />

    导致：

    <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" />
              <add input="{REQUEST_URI}" negate="true" pattern="^\/api\/.*$" ignoreCase="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" appendQueryString="true" />
      </rule>
  </rules>
</rewrite>
    回复于
  • 20

    老问题，但我想提供这个建议作为未来读者的替代方案，因为我更喜欢Rewrite方法：

    基于stas.ivash和Adrian Moisa的答案：我使用了他们的URL重写建议，但是我没有列出路由，而是修改了正则表达式以路由除Angular 2 CLI生成的应用所需文件之外的所有内容，并使用给定的扩展名（ .bundle.js ， .bundle.map ）等等......）：

    <?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico)).*$" />
          <conditions logicalGrouping="MatchAll">
          </conditions>
          <action type="Rewrite" url="/"  appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

    我无法真正谈论在 生产环境 环境中使用此RegEx解决方案的性能影响，但它在我们的Dev和Stage环境中适用于我们 .

    回复于
  • 2
    回复于
  • 0

    您可以通过实现哈希位置策略来修复错误：

    要启用HashLocationStrategy，它是这样的：

    RouterModule.forRoot(routes, {useHash: true})

    URL可以包含前面带有 # 字符的一些数据 .

    URL的 # 部分称为哈希片段 . 它从未发送到服务器，

    示例： http://example.com/#/clients

    回复于

相关问题