在 angular2 的 app.component.html 中使用 *ngIf 更改路由器插座 [英] Changing router-outlet with *ngIf in app.component.html in angular2
问题描述
我使用的是 angular 2.0 final.我正在尝试更改主 app.component.html 中 router-outlet 的位置.模板正在更新精细显示,除了我第一次使用 router.navigate 组件不会显示在新的路由器插座中,并且没有错误.第二次和每次我使用 router.navigate 后它都能正常工作.
app.component.html 示例模板
<h1>未登录</h1><路由器插座></路由器插座><div *ngIf="authenticated()"><h1>登录</h1><路由器插座></路由器插座>
我想说请使用一个命名的 router-outlet
,它工作得很好,但对我来说问题是这样的 url根本不是用户友好的,我个人认为带有插座名称的网址没有意义,
例如:-
路线
{ path : "forgotPassword", component :ForgotPassword , outlet : "notlogedin" }
浏览器地址栏输出
http://localhost:4200/(notlogedin:forgotPassword)
看看它在地址栏中看起来多么愚蠢.
因此,如果您尝试使用 *ngIf
来有条件地禁用和启用 router-outlet
以克服该问题,则它不起作用.一个router-outlet
会被注册,不管你做什么,下一个router-outlet
都不会响应路由变化.
所以这是解决方案
使用 ngTemplateOutlet
和 ng-template
我们可以通过只保留一个 router-outlet
来很好地解决这个问题,见下面的示例代码.
<li><a routerLink="/login">登录</a></li><li><a routerLink="/dashboard">dashboard</a></li>
<!--这是我之前登录路由器所在的位置--><div class="logedIn-route" *ngIf="routerActive"><ng-container *ngTemplateOutlet="template"></ng-container>
<!--这是我登录后路由器所在的位置--><div class="logedout-route" *ngIf="!routerActive"><ng-container *ngTemplateOutlet="template"></ng-container>
<ng-template #template><路由器插座></路由器插座></ng-模板>
试试小提琴
https://jsfiddle.net/imal/e4tyqv95/36/
>I am using angular 2.0 final. I am trying to change the location of the router-outlet in the main app.component.html. The template is updating fine display wise except, the first time I use router.navigate the component won't display in the new router-outlet, and there is no error. The second and every time after I use router.navigate it works properly.
example template of app.component.html
<div *ngIf="authenticated() == false">
<h1>not logged in</h1>
<router-outlet>
</router-outlet>
</div>
<div *ngIf="authenticated()">
<h1>logged in</h1>
<router-outlet>
</router-outlet>
</div>
I'd like to say please use a named router-outlet
which work perfectly fine, but issue for me is that such urls are not user friendly at all and I personally believe url with outlet name does not make sense,
ex:-
route
{ path : "forgotPassword", component :ForgotPassword , outlet : "notlogedin" }
output in browser address bar
http://localhost:4200/(notlogedin:forgotPassword)
see how stupid that it looks in the addressbar.
so if you try to use *ngIf
to conditionally disable and enable router-outlet
to overcome the problem it does not work. One router-outlet
will get registered and no matter what you do, next router-outlet
will not respond to the route changes.
So Here is The Solution
Using ngTemplateOutlet
and ng-template
we can provide a good solution to this problem by keeping only one router-outlet
see below sample code.
<ul>
<li><a routerLink="/login">login</a></li>
<li><a routerLink="/dashboard">dashboard</a></li>
</ul>
<!--This is where my before login router stays-->
<div class="logedIn-route" *ngIf="routerActive">
<ng-container *ngTemplateOutlet="template"></ng-container>
</div>
<!--This is where my after login router stays-->
<div class="logedout-route" *ngIf="!routerActive">
<ng-container *ngTemplateOutlet="template"></ng-container>
</div>
<ng-template #template>
<router-outlet>
</router-outlet>
</ng-template>
Try the fiddle
https://jsfiddle.net/imal/e4tyqv95/36/
这篇关于在 angular2 的 app.component.html 中使用 *ngIf 更改路由器插座的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!