gpt4 book ai didi

javascript - Angular 2 中组件模板之外的 routerLink,在基本 html 中

转载 作者:太空狗 更新时间:2023-10-29 18:33:21 27 4
gpt4 key购买 nike

当我在 @Componenttemplate 属性中使用 routerLink 指令时,它起作用了。

但我们谈论的是我整个网站的顶部菜单栏。但是当我将它分离到我的主模板文件 (layout.html) 中时,它不再起作用。

是的,我是 ng2 的大菜鸟,无可否认,但我希望我的菜单远离 javascript 文件并位于主布局 html 中。如何才能做到这一点?

<body>
<base href="/" />
<div class="row menu">
<div class="container">
<ul class="u-pull-left">
<li><a [routerLink]="['/']" routerLinkActive="active">Home</a></li>
<li>Notifications</li>
<li>My Hisses</li>
</ul>
<ul class="u-pull-right">
<li><a [routerLink]="['/register']" routerLinkActive="">Register</a></li>
<li><a [routerLink]="['/login']" routerLinkActive="active">Login</a></li>
</ul>
</div>
</div>

<root></root>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>

我错过了哪个关键步骤?有可能吗?

谢谢!

最佳答案

routerLink 是指令,[routerLink]="..." 是指令输入的绑定(bind)。这些都不应该在 Angular2 组件之外工作。

您可以使用在 Angular2 之外实例化并作为提供者传递的共享服务

 let service = new MyService();

@NgModule({
providers: [{provide: MyService: useValue: service}],
...
})
class AppModule {}

然后您可以使用 service 与某些 Angular2 组件或服务通信以委托(delegate)调用 router.navigate(...) 执行命令式操作 routerLink 会做。

另一种方法是触发事件(window.dispatchEvent(...))并在 Angular2 中监听此事件。

如果可能的话,我会完全避免这样的设置(在 Angular2 组件之外设置路由器链接)。

关于javascript - Angular 2 中组件模板之外的 routerLink,在基本 html 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39739840/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com