Question

很抱歉，让您再次提出问题。我正在使用Angular 7，而我正在尝试使用Router Link。

这是我的应用程序路由模块

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键，则组件已加载，从这一点开始，路由器链接起作用。

我尝试了很多stackoverflow解决方案，例如以

的任何形式编写链接

<a routerLink="/locations" ...
<a [routerLink]= ['/locations'] ...
<a [routerLink]= "['/locations']" ...

具有或不具有LinkAttive属性。放置

<base href="/">

在index.html等文件中...

遵循以下主题：TOPIC我试图在我的Layout组件中包括Router：

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>

更新：这是route。标签所在的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>

Answer 1

注意：此答案基于问题的先前版本，因此您添加了 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>

所有链接都可以通过单击以及在浏览器中手动输入网址（例如：http://localhost:4200/locations/create/:id）并重新加载（F5）来使用。

新组件

使用ng generate component命令生成：

仪表板
LocationManager
CreateEditLocation
PageNotFound

app-routing-module.ts

与文件相同，但还为新生成的组件添加了导入语句。

Answer 2

我知道了导致问题的原因，但是我无法理解原因，并且无法在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>

上面是应用程序布局代码。

这行不通！

我用一个简单的方法更改了它：

<main> 
  <app-layout style="height:100%"></app-layout>
</main>

从我的问题中可以看到，布局具有自己的路由器出口。我认为问题是两个路由器出口标签。也许Angular无法理解它们是互斥的。也许当我单击菜单时，由于某种原因，Angular会更新遇到的“第一个”路由器出口，并且只有在刷新（F5）之后，当isLogged已被触发并且应用程序布局已直接加载时，Angular才知道哪个使用的路由器插座。

在新的方式中，所有页面（即使是Login）都必须是AppLayout的子元素，因此只有在记录后才存在的每个Layout组件，都必须使用* ngIf ='！isLogged（）'手动隐藏要花点钱就能拥有路线。

Angular：7.2.14-另一个路由器链接不起作用

2 个答案:

app.component.html

dashboard.component.html

新组件

app-routing-module.ts