问题标签 [angular-routerlink]

我的应用程序中有一个主插座和一个命名插座，定义如下：

我在我的应用程序路由中定义了一个要与这个中心组件一起使用的路由：

我在 Car.component.html 中定义了一个链接，以将 GI 组件路由到命名的插座。但是这个链接给了我一个错误：

但是，我可以使用 router.navigate() 创建一个函数来执行此导航：

...以及我的 Car.Component.ts 文件中的相关函数：

所以函数 routeGI() 就像一个魅力，但使用 [routerLink] 从 html 导航给了我以下异常：

这些指向我命名插座的链接不应该都有效吗？

我想从一个 html 页面使用 routerLink 和 state 路由到另一个页面。使用标签没有问题，在登录页面中的 ngOnInit 期间，我可以按预期检索状态。使用标签主页也可以导航，但状态结果未定义。

我怎么了？

登录页面的html

登录页面的ts

首页的ts

我很确定我的应用程序中的路由设置正确，因为当我输入正确的路径时，它会带我去并显示正确的信息。我遇到问题的地方是路由器链接。我相信它与HTML有关？当我点击每个链接时，什么都没有发生。无论如何，我将发布 HTML 以查看是否有人可以指出我可能做错的事情。我在这里也有 github 存储库链接：https ://github.com/jadenadams329/JIT1

我期望发生的是当我单击显示正确视图的链接时，我不必每次都输入路径。

我在 NgbModal 中使用 routerLink 指令时遇到了非常奇怪的情况。首先，我有结构如下的功能模块：

路由定义如下（简化）：

我有从首选项组件打开的模式，如下所示：

打开模态时我不会更改 url，所以我建议从路由器的角度来看，当我打开模态时没有任何变化。

在弹出组件和首选项组件中，我都有这样的链接：

<div class="rule" routerLink="../rules/new">

问题是从弹出组件我被重定向到 404，而从首选项我导航到正确的 url。

问题的描述可能看起来过于复杂，如果你觉得很抱歉:) 我试图简化事情。

任务 - 为 Angular 库创建一个可重用的按钮/锚标记属性选择组件，其中尽可能多的行为逻辑绑定在组件本身而不是 HTML 标记上。

理想情况下，HTML 标记应尽可能干净

<a routerLink="" attributeSelectorForComponent></a>

问题 - 尝试通过单击侦听器阻止 routerLink[attr.disabled]在锚标记上出现时触发。

为简单起见，从等式中删除了禁用的逻辑，无论如何仍会触发 routerLink。

建议的解决方案 -如何有条件地禁用 routerLink 属性？并不能真正帮助解决我的问题，禁用指针事件只会禁用鼠标事件而不是键盘事件，并且还会阻止我删除指针事件：鼠标悬停时没有，单击等需要相对复杂的检测禁用属性并相应地删除 css 的解决方案，通常看起来更像是一个 hacky 解决方案而不是正确的解决方案。

我是 Angular 测试的新手，目前我正在尝试测试这段代码，但我收到有关 DOM 上引发的事件的错误：

测试文件：

为什么原生元素上的点击事件为空？

我正在学习 Angular，运行 CLI 版本 8.3.8

所以我花了几个小时试图弄清楚为什么像下面这样的命名不起作用：

用户.ts

应用程序路由.module.ts

用户列表.component.html

每个其他文件都有对应于名为“id”的 user.id 的每个参数。

当我单击user-list.component.html中的链接时，出现以下错误：

而且里面user.id的也<span>没有显示。

在弄乱了 routerLinks 和路径之后，我开始随机将 'id' 更改为 'userId' 并且当user-list.component.html看起来像这样时：

它无需对其他文件进行任何其他更改即可工作。<span>元素也是如此。

我还遇到了相反的情况，另一个属性 -user.name将很好地显示{{ user.name }}，但是将属性的名称更改为user.userName并在任何地方替换它，就像{{ user.userName }}不起作用并且名称不显示。

用户数据是从一个简单的服务器设置中检索的，其中Userjava bean 的属性名称是userIdand name，所以我认为它必须对此做一些事情，但是为什么组件模板是我需要服务器和客户端中的属性名称的唯一地方匹配？（为什么user.service.ts的所有 http 请求都不受此影响？）

当我在 Angular 中开发并创建视图时，我总是使用 routerLink 从一个视图导航到另一个视图。最近我看到使用 Angular 制作的重要页面使用 href 而不是 routerLink 来路由网站上的视图。我的问题是，什么时候在 Angular 中使用 href 而不是 routerLink 方便，为什么？是不是给人一种不是SPA的感觉？

如果是这样，我不理解它，因为它失去了 Angular 路由的全部潜力。

一些例子是

提前致谢

我有一个使用 Angular 8 构建的应用程序。Routerlinkactive一开始没有在动态生成的路由上激活，但是当我单击同一模块中的一些其他链接并返回时，它就可以工作了。routerLinkActive设置在 中，当基于url 参数UserComponent加载child() 时，它应该激活导航中的锚点。UserProfileComponent

我尝试了很多解决方案，例如使用模板变量

[routerLinkActive]="['']" [ngClass]="rla.isActive ? 'mat-accent' : 'mat-primary'" #rla="routerLinkActive" 或应用[routerLinkActiveOptions]="{exact:true}"，但没有一个是有帮助的。

这是我的 HTML 代码的最后一个版本。

我猜问题出在动态生成的路线中（基于用户ID），

例如http://my-domain/user/profile/5dd58c41409cccea2c9296f3，因为当我直接访问其他组件时，例如http://my-domain/user/posts然后routerLinkActive工作正常将active类设置为相应的链接。这就是我为当前模块配置路由的方式。

任何提示表示赞赏。谢谢！

我在角度（版本 8）组件 A 和 B 之间传递数据state，例如：

在 ComponentB 中，我正在读取数据：

一切都在 live webapp 中工作，但我似乎无法在 jasmine 测试中复制相同的内容。单元测试是这样的：

导航在添加this.data = ...到之前有效ngOnInit()，但现在出现空指针异常。实际上state是null，但我不知道为什么。实时运行 webapp 时一切正常，但 Jasmine 单元测试失败。

我知道我可以添加history.pushState({data: {hello: 'world'}}, '', '');到设置中，但我希望在单元测试期间将真实数据从组件 A 传递到组件 B。我错过了什么？为什么来自一个组件的数据不会通过 传输到另一个组件state？