Question

我对角度8还是陌生的。任何帮助或提示将不胜感激！这是我的app.routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LabViewerComponent } from './lab-viewer/lab-viewer.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'home', component: HomeComponent},
  { path: 'LabViewerPDF', component: LabViewerComponent}
];

@NgModule({
imports: [RouterModule.forRoot(routes, {useHash: true})],
exports: [RouterModule]
})
export class AppRoutingModule { }

这是我的home.component.html：

Home
<a  (click)="selectLab()">Click here to download my Plan (PDF)</a>

<router-outlet></router-outlet>

这是我的app.component.html：

app component
<a  (click)="selectLab()">Click here to download my Plan (PDF)</a>

<router-outlet></router-outlet>

不确定为什么该网址： http://localhost:4200/#/home

显示：应用程序组件单击此处下载我的计划（PDF）首页单击此处下载我的计划（PDF）

应为：主页组件单击此处下载我的计划（PDF）主页单击此处下载我的计划（PDF）

Answer 1

您的AppComponent（包含根路由器出口）显示：

app component
<a  (click)="selectLab()">Click here to download my Plan (PDF)</a>

<router-outlet></router-outlet>

当您导航到home时，路由器插座将按顺序填充HomeComponent（其余部分保持不变），因此您得到：

<a  (click)="selectLab()">Click here to download my Plan (PDF)</a>

<!-- main router outlet's contents here: -->
Home
<a (click)="selectLab()">Click here to download my Plan (PDF)</a>
<!-- this router outlet will be filled, if `home` has any child routes -->
<router-outlet></router-outlet>

Answer 2

<router-outlet></router-outlet>

包含当前路线。您想通过单击某处的routerlink将家装到该路由器的插座中。我怀疑这就是您的意思。

Home
<a  (click)="selectLab()">Click here to download my Plan (PDF)</a>

app component
<router-outlet></router-outlet>

角8路由不能直接重定向到正确的页面

2 个答案: