Angular: 7.2.14 -另一个路由器链路不工作主题
很抱歉再提一个问题。我正在使用Angular 7，并且正在尝试使用Router Link。
这是我的app-routing-module
const routes: Routes = [
{ path: 'locations' , component : LocationManagerComponent },
{ path: 'locations/create' , component : CreateEditLocationComponent },
{ path: 'locations/create/:id', component : CreateEditLocationComponent },
{ path: '404' , component : PageNotFoundComponent},
{ path: '**' , redirectTo: '/404'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }这是路由器链接：
<a [routerLink] = "['/locations']" routerLinkActive="active"> test link </a>当我点击链接时，没有任何反应。浏览器上的URL已更改，但组件未加载。如果我按下F5，组件就会加载，从那时起，路由器链路就可以工作了。
我已经尝试了很多堆栈溢出解决方案，比如在任何类型的变体中编写链接，比如
<a routerLink="/locations" ...
<a [routerLink]= ['/locations'] ...
<a [routerLink]= "['/locations']" ...具有或不具有LinkAttive属性。推杆
<base href="/">在index.html等...
遵循这个主题：TOPIC我已经尝试在我的布局组件中包含路由器：
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.css']
})
export class LayoutComponent implements OnInit {
constructor(
private route : ActivatedRoute
) { }
[...]但一切都没有改变。
奇怪的是，在F5之后，所有路由都可以工作，甚至到尚未加载的组件的路由也是如此。
在本主题TOPIC 2中，用户解决了删除css类的问题。我试图将我的链接放在一个完全干净的组件HTML中，但它不工作(但在刷新后仍然有效)。
<p>
dashboard works!
<a routerLink = '/locations' routerLinkActive="active"> test link </a>
</p>更新:这是路由标签所在的layout.component。我不知道如何在没有路由插座的情况下拥有一个Sidenav。
<mat-sidenav-container fullscreen>
<mat-sidenav #sidenav mode="over">
<div class="profile_container">
<span> User Name </span>
</div>
<mat-nav-list>
<mat-list-item><a [routerLink]="['/locations']" routerLinkActive="active"> Locations
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<app-header (toggleSidenav)="sidenav.toggle()"></app-header>
<div style="padding: 20px 10px 10px 20px;">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>回答 2
Stack Overflow用户
发布于 2019-07-10 19:32:38
注意：这个答案基于您问题的前一个版本，在您添加layout.component.html的代码之前。因此，我没有使用布局组件，而是使用简化的仪表板组件。
下面的代码适用于我在Angular 8.1中的工作。
app.component.html
<app-dashboard></app-dashboard>
表示DashboardComponent包含在AppComponent中(是其子对象)。不更改默认app.component.ts
dashboard.component.html
<p>
dashboard works!
<a routerLink = '/locations' routerLinkActive="active">
Locations test link </a>
</p>
<p><a routerLink = '/locations/create' routerLinkActive="active">
Locations/create </a></p>
<p><a routerLink = '/locations/create/:id' routerLinkActive="active">
Locations/create/:id </a></p>
<p>router-outlet is below:</p>
<router-outlet></router-outlet>所有的链接都与点击和在浏览器中手动输入url (例如：http://localhost:4200/locations/create/:id)和重新加载(F5)一起工作。
新组件
使用ng generate component命令生成：
- Dashboard
- LocationManager
- CreateEditLocation
- PageNotFound
app-routing-module.ts
与您的文件相同，但也为新生成的组件添加了import语句。
Stack Overflow用户
发布于 2019-07-11 22:45:19
我知道是什么导致了这个问题，但是我不能解释为什么，我不能在StackBlitz中重现。
这是我的app.component.html，所有应用的根：
<main>
<!-- Showing All Site Pages -->
<span *ngIf='isLogged()'>
<app-layout style="height:100%"></app-layout>
</span>
<!-- Showing Login Page -->
<div *ngIf='!isLogged()'>
<router-outlet></router-outlet>
</div>
</main>App-Layout代码在上面。
这不管用！
我用一句简单的话改变了它：
<main>
<app-layout style="height:100%"></app-layout>
</main>正如你从我的问题中看到的，布局有它自己的路由器插座。我认为问题出在两个路由器插座标签上。也许Angular不能理解它们是相互排斥的。也许当我点击菜单时，由于某些原因，Angular正在更新遇到的第一个路由器插座，只有在刷新(F5)之后，当isLogged已经被触发，应用布局被直接加载时，Angular知道要使用哪个路由器插座。
在新的方式中，所有页面，甚至登录，都必须是AppLayout的子级，所以每个布局组件只有在记录时才存在，必须用*ngIf='!isLogged()‘手动隐藏，这是让路由工作的一个小代价。
https://stackoverflow.com/questions/56966458
复制相似问题
腾讯云开发者
