问题标签 [angular4-router]

将 Angular 4 和 REST 应用程序与服务连接时出现错误。

以下是错误：

我已经检查并仔细检查了我的路由器设置是否有任何错误，但我自己似乎找不到任何错误。任何建议表示赞赏。

这是我的 app-routing.module.ts 代码：

这是我的 app.module.ts 代码：

这是我的 typeahead-component.ts 相关代码：

这是我的dashboard-service.ts 相关代码：

此外，我在 tsconfig.app.json、tsconfig.spec.json 和 tsconfig.json 中的 emitDecoratorMetadata 都设置为 true。

提前道歉-我没有为此创建 plunkr，因为我对使用 plunkr 非常陌生。

我将非常感谢我尝试实施的任何工作示例。

谢谢！

我正在尝试在 Angular 4 应用程序中使用 Angular Routes，但该应用程序无法加载与请求的路由匹配的组件：

这里是app-routing.module.ts：

app.module.ts看起来像这样：

app.component.html：

我的dashboard.component.html：

我试图找出问题所在，还查看了 Angular 4 Routing tutorial。请帮忙。

我正在创建一个带有登录页面的新应用程序，而对于其他页面，我已经离开了 -nav 菜单。

我为页面使用了子路由，为登录页面使用了普通路由，一切正常，但是在右侧与现有路由一起，以前的路由页面数据也显示在现有路由的底部。

我的 app.module.ts

app.component.html

home.component.html

login.component.html

这有用户名和密码文本框

me.component.html

消息.component.html

当我转到 localhost:4200/home/messages - 消息和关于我的信息也会显示。

我有一个类似这样的 URL：

base_path/some_path?elementId=33203

基本上，用户可以并且通常通过在浏览器中粘贴上述链接来导航到该路径。我需要在组件之前加载该组件的数据，因此我开始阅读 Angular 路由教程，特别是旨在实现我所拥有的确切难题的解析器服务。所以我创建了一个解析器服务，例如：

这个解析类现在添加到 app.routing.module.ts 中，例如：

}

并在我的component.ts文件中进行相应的修改，如：

我在解析器和组件文件中设置了调试断点。当我访问 URI:base_path/some_path?elementId=33203时，它首先访问了解析器，但是由于解析器调用了服务（这反过来又调用了对服务器获取数据的 ajax 调用），它然后简单地继续到组件，并调用 ngOnInit 函数，tryin在 (data: { someObject: SomeObject}) 上调用订阅函数

但是， someObject 尚不可用，因此它会引发错误并重定向。

我错过了什么？resolve 函数不应该在调用它之前显式加载它的组件的数据吗？

Lets's say, that I have 3 different routes, A,B and C and you can navigate from any route to another. The display of the 3 routes visually would look like a slider.

I would like to create a slide animation for all the possible route change combinations. From B->C, C->B, B->C, C->B it's trivial. But what if I want to create an animation between A->C and C->A, which should look like it's sliding through B.

What would be the best practice for this?

我在 Angular 4 应用程序中使用嵌套路由。它们的结构如下：

我在 app.component.html 中定义了一个路由器插座。

当我导航到“父/子”路由时，此设置工作正常，路由器出口加载了 ChildComponent。

但是，当我导航到“父/子/孙子”路线时，GrandchildComponent 不会加载。

这似乎确实适用于子组件中的辅助路由器插座，但是有什么方法可以让 GrandchildComponent 加载到根路由器插座上，而不需要辅助路由器？

app.module.ts我的 Angular 4 应用程序使用延迟加载 ( )在文件中设置了父路由loadChildren。有些路由需要身份验证（使用canActivate），有些则不需要：

子路由设置在每个相应的模块内。例如，对于 中的子路由CustomerLocatorModule，它们已被放置在customer-locator.module.ts：

正如当前设置的那样，所有子路由path: ''都需要进行身份验证才能访问。

EditCustomerComponent鉴于其父路由 ( ) 确实需要身份验证，子路由（在这种情况下，指向 的路由）是否可能customer-locator不需要身份验证？

这些是我的路线：

我的应用程序从欢迎页面开始，当我点击登录时，它会将我带到课程页面，点击课程后，应用程序应该将我带到课程组件​​，但它会重定向到欢迎页面，当我点击登录时，它会给我这个错误：

我查找了类似的问题，所有这些问题都建议检查基本 href，在我的应用程序中它设置为 / 所以那里没有问题。谁能请我做错了什么？

我想将 routerLink 与组件中属性的值一起使用，但出现错误

未捕获的错误：语法错误，无法识别的表达式：/configuration/reservations at Function.Sizzle.error (scripts.bundle.js:1581) at Sizzle.tokenize (scripts.bundle.js:2233) at Sizzle.select (scripts.bundle. js:2660) 在 Function.Sizzle [as find] (scripts.bundle.js:885) 在 jQuery.fn.init.find (scripts.bundle.js:2923) 在新 jQuery.fn.init (scripts.bundle. js:3033) 在 jQuery (scripts.bundle.js:99) 在 getTargetFromTrigger (scripts.bundle.js:10955) 在 HTMLAnchorElement。(scripts.bundle.js:10997) 在 HTMLDocument.dispatch (scripts.bundle.js:5207)

我的代码：

我的 Angular 组件依赖于使用解析器服务设置数据参数的激活路由。对于我的单元测试，我喜欢模拟它，如下所示：

activatedRouteStub = { data: { subscribe: (fn: (value: Data) => void) => fn({ someObject: SomeObjectMock // hard coded JSON value }), } }; TestBed.configureTestingModule({ declarations: [SomeComponent], providers: [ { provide: ActivatedRoute, useValue: activatedRouteStub } ] }); route = fixture.debugElement.injector.get(ActivatedRoute);// where route is in an instance of ActivatedRoute that is injected into SomeComponent as a dependency

这对于依赖于activatedRoute 的这种行为的初始测试集很有效。但是现在，我需要更改实际返回的内容，基本上，我需要使用修改后的 SomeObjectMock 并将其设置为 someObject。

而且我对如何做到这一点缺乏想法，我尝试过以下操作：

route = { data: { subscribe: (fn: (value: Data) => void) => fn({ someObject: SomeObjectMock // hard coded JSON value }), } };

以前，当我对一个简单的服务进行存根时，这已经奏效了，更改方法的定义以返回不同的值是相当微不足道的。

任何建议/指针？