问题标签 [angular2-router3]

我有一个现有的 Angular2 应用程序，其中通过创建AuthRouterOutletDirective扩展RouterOutlet. 这使得componentInstruction在激活功能中使用来检查用户是否登录变得很容易，如果没有将他们重定向到我们的登录门户（由于各种原因，我无法控制这是通过一个单独的应用程序，它有自己的登录屏幕和然后在导航到下一个组件之前发回一个我们将保存在 Angular2 应用程序中的令牌。

我刚刚升级到路由器 3.0.0-alpha.8，我发现这不再是一个选项，它已被创建一个 authGuard 并使用该canActivate方法处理身份验证所取代（我指的是文档）。我正在努力解决的问题是，这似乎是为只有少数路由受到保护的应用程序设计的，您可以canActivate: [AuthGuard]在 RouterConfig 中添加到需要身份验证的每个路由。

我遇到的问题是每条路由都需要通过身份验证来保护。还需要持续检查（除非有更好的解决方案），因为我们也（再次部分由于我们必须使用的外部登录服务）将注销用户并清除他们的令牌，并且下次导航到新路线（无论路线是什么）它应该将您重定向到再次登录。我知道我可以添加canActivate: [AuthGuard]到每条路由，但这似乎是一个疯狂而乏味的修复，特别是对于具有大量路由的应用程序，所有这些都需要用户经过身份验证才能查看。

我一直在寻找解决方案，但似乎部分原因是升级是相当新的，所有资源都用于如何仅在一两条路线上实施这些 AuthGuard。我一直在挖掘源代码（特别是这里），看看是否有另一种方法可以扩展，它比canActivate让每条路线都包含一个特定的守卫更全面或更通用的方法，但我似乎找不到任何东西。任何关于如何最好地实现这一点的建议将不胜感激！谢谢。

AngularJS 1.x ui-router 具有极其灵活的视口概念。在我看来，它们就像命名路线，但提供了更多的灵活性。

与 的路线viewports不分为primary/aux路线之类的东西。它们只是放在带有 ui-view 的 html 中的任何位置，您可以通过状态/路线中的视口名称引用它们。

现在有了 viktor savkin 的新 angular 2 router 3，我找不到那种灵活性，因为它<router-outlet>是直接放在组件上的，所以它似乎与它绑定。

也许我的方法太像 ui-router ...

虽然我知道 ng2 的 angular ui-router 我不想使用它：

我创建了一些草图（遗憾的是，网址中有错别字，但我以某种方式丢失了原始草图......）你更了解我想要实现的目标：

当我在 state/url /projects/1 上时——这将是一个带有角度路由器 3 alpha 的无组件路由...——然后单击项目的打开按钮，然后该项目的子会议将呈现为

我从一个错误跳到另一个错误，例如：

设置这种常见场景非常混乱。

我尝试过的一件事：

我会很高兴在这方面有任何帮助，否则我会尝试使用 ui-router，它一见钟情就提供了一个更简单、更明显的概念。

我有带有子页面的根页面，根页面模板具有[routerLink]路由到子页面的指令。像这样的东西：

HomeComponуnt 在指令部分有 ROUTER_DIRECTIVES。*

当我第一次导航到页面时，链接没有href，但是如果我更新页面，它们会起作用。有什么成语吗？

按照官方文档，尝试切换到新路由器，如版本 "@angular/router": "3.0.0-beta.2" 结合 "@angular/*": "2.0.0-rc.4"组件路由器。

但是，在尝试使用默认 HomeComponent 加载我的应用程序时，我遇到了一个问题：

这似乎与使用 templateUrl 和外部 html 文件而不是使用内联模板样式有关。

HomeComponent 最初未显示在 Window 中，错误会打印到控制台。但是，当我使用指向 Home Component 的链接时，它会显示为二手。

一旦我从

至

错误消失，显示 HomeComponent 并且路由按预期工作。

这是一个已知问题吗？它适用于使用 templateUrl 的人吗？有什么我必须尊重的东西才能让它发挥作用吗？

我似乎对 Angular 2 的新路由器 3.0.0-alpha.8 有问题。

长话短说，我的 app.routes.ts 是

它可以很好地加载 A 部分的路线，即：

但它无法加载嵌套的 SectionAMoreRoutes。当我说加载失败时，我的意思是我得到的错误是：

嵌套路由时，我的打字稿似乎没有被编译成 js。我很想获得有关如何进行的任何帮助或想法，因为我迷路了:(

谢谢！！！

额外信息：我的 main.ts 有：

Section-a-more 路线如下所示：

TLDR：为什么我的嵌套路由不能在 Angular 2 和 Router 3.0.0 中编译

我正在尝试找到一种方法来处理设置将处理以散列片段开头的路由的 Angular2 Typescript 路由（使用 3.0.0-alpha.8 路由器）。

我正在开发的应用程序通过带有 oauth2 的 rails 后端处理所有外部登录（我无法控制）。将用户重定向到外部登录页面工作正常，但是当重定向 url 时，总是某种形式的http://localhost:4200#access_token=TOKEN（其中 TOKEN 是一系列数字和字母）被发回，但我不知道如何设置可以处理的路由#签名，以便我可以抓住它并重定向到适当的组件。

在以前的 Angular1 应用程序中ui-router，能够在以下路线中使用：

并且这可以毫无问题地接受发回的重定向 url，然后将所有内容传递给 LoginController 以在前端处理其余的身份验证/令牌业务。

然而，这个应用程序是 Angular2 和 Typescript，路由器查询参数似乎不太灵活，我在实施类似的解决方案时遇到了麻烦。我一直在基于文档中的这一部分进行操作，但是所有示例都在构建其他内容，例如/heroes在进入查询参数的复杂部分之前，例如/heroes/:id。我也搜索了 stackoverflow，但找不到任何适用于 Angular2 和 Typescript 以及当前路由器的东西。

这是我当前的（非工作）解决方案：

如果我将发回的重定向 url 修改为类似的东西（纯粹是为了测试目的），http://localhost:4200/access_token=TOKEN它就可以正常工作。不幸的是，在现实生活中，我实际上无法控制重定向 url 的格式，而且我无法想出一个解决方案来处理它以哈希片段而不是 a 开头，/然后是我的查询参数的事实。我能找到的所有带有复杂符号或字符的路由示例都以/.

我尝试将上面的解决方案修改为:access_token，但这不起作用，并将其列为基本路由下的子路由，如下所示：

这导致以下控制台错误： platform-browser.umd.js:2312 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''

我觉得绝对必须有一个干净的解决方案来解决这个问题，特别是因为这么多 API 通过这样的重定向 url 处理他们的身份验证，但无论我如何挖掘文档，我似乎都找不到它。任何关于如何实现这一点的建议将不胜感激。

如何[routerLink]从 Angular Router v3 扩展指令，以便我可以自己包装一些自定义功能？我查看了RouterLinkWithHref指令，看来这就是我想要扩展的内容，所以我制作了这个：

扩展路由器链接指令

我尝试像这样使用它：

我将它包含在directives我的组件数组中：

然而，我收到以下运行时错误：

“模板解析错误：无法绑定到‘extendedRouterLink’，因为它不是已知的本机属性”

如果我extends RouterLinkWithHref从我的指令中删除，它可以正常工作。我究竟做错了什么？

假设我得到了这个路由配置：

如果我导航到

我到达联系方式，但我如何从那里到达辅助路线？也就是说，我需要在我的[routerLink]?

我知道我可以使用绝对 URL 轻松到达那里，例如

但是如果我需要在这里使用相对链接怎么办？那必须采取什么形式？我试过了

等等，但这些都没有创建实际有效的链接（见上文）。

我在使用路由器 3.0.0-beta2 的 RC4 上。

我正在试验新路由器（版本 3.0.0-alpha.7），想知道如何通过 routerLink 指令指定查询参数？

下面的 Router.navigate() 方法会生成一个类似http://localhost:3000/component-a?x=1的 URL

但是，我不知道如何用 routerLink 指令做同样的事情。如下模板返回解析器错误...

我能得到的最接近的是http://localhost:3000/component-a;x=1，它使用子路由的语法。

我试图在激活之前确定路由是什么，以便我可以缓存它并在用户登录后将其重定向回该路由。

在旧的 beta 路由器中，我可以调用ComponentInstruction.routeName激活钩子，但在较新的canActivate()防护中，我看不到在激活之前访问预期路由的方法。

当用户单击我的应用程序中的导航按钮时，我可以将预期的路线存储在共享服务中，但是当他们在地址栏中输入 URL 时呢？