如何通过localhost访问我的子路由

Question

嗨，当我键入时，我无法访问子路由

localhost:4200/general-managment/list-site

这不会转到列表网站HTML。

这是我的清单

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit {
showlist = true;
constructor(private router: Router,
private route: ActivatedRoute) { }
ngOnInit() {
}
siteList() {
this.router.navigate(['list-site'] , {relativeTo: this.route});
this.showlist = false;
}
}

在this.router.navigate(['list-site'] , {relativeTo: this.route});中，我尝试了/list-site、./list-site和../list-site，但它不起的作用

这是我的app-routing.service.ts:

import {Routes, RouterModule} from '@angular/router';
import {HomeComponent} from './home/home.component';
import {NgModule} from '@angular/core';
import { LogoutComponent } from './header/logout/logout.component';
import {GeneralManagementComponent} from 
'./home/generalmanagement/generalmanagement.component';
import {SiteComponent} from './home/general- 
management/list/site/site.component';
const appRoutes: Routes = [
{path: '', component: HomeComponent},
{path: 'log-out', component: LogoutComponent},
{path: 'general-management' , component: GeneralManagementComponent , 
children : [
{path: 'list-site' , component: SiteComponent}
]}
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
],
})
export class AppRoutingService {
}

这是我的HTML文件：

<button> id="close-image" type="button" class="box" (click)="siteList()"> 
<img class="list-content" src="assets/imgs/download.jpg">Site
</button>

我使用角度6。如何修复

我在这里使用控制台：

siteList() {
console.log(this.router.navigate(['list-site']));
this.router.navigate(['list-site'] , {relativeTo: this.route});
this.showlist = false;
}

这就是我看到的：

__proto__:
catch: ƒ (onRejected)
arguments: (...)
caller: (...)
length: 1
name: ""
prototype: {constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: zone.js:966
[[Scopes]]: Scopes[4]
finally: ƒ (onFinally)
arguments: (...)
caller: (...)
length: 1
name: ""
prototype: {constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: zone.js:969
[[Scopes]]: Scopes[4]
then: ƒ (onFulfilled, onRejected)
arguments: (...)
caller: (...)
length: 2
name: ""
prototype: {constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: zone.js:955
[[Scopes]]: Scopes[4]
constructor: ƒ ZoneAwarePromise()
all: ƒ (values)
race: ƒ (values)
reject: ƒ (error)
resolve: ƒ (value)
toString: ƒ ()
__zone_symbol__uncaughtPromiseErrors: []
arguments: (...)
caller: (...)
length: 1
name: "ZoneAwarePromise"
prototype: {then: ƒ, catch: ƒ, finally: ƒ, constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: zone.js:883
[[Scopes]]: Scopes[4]
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ ()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

Answer 1

我只需要创建一个新的div，在新的div中，我调用路由器出口，它运行良好：(

Answer 2

因为当您调用list-site路由时，它会尝试生成SiteComponent，但您的组件被称为ListComponent。

以下是您的app-routing.service.ts应该是什么样子：

import {Routes, RouterModule} from '@angular/router';
import {HomeComponent} from './home/home.component';
import {NgModule} from '@angular/core';
import { LogoutComponent } from './header/logout/logout.component';
import {GeneralManagementComponent} from 
'./home/generalmanagement/generalmanagement.component';
import {ListComponent} from './home/general- 
management/list/site/site.component';
const appRoutes: Routes = [
{path: '', component: HomeComponent},
{path: 'log-out', component: LogoutComponent},
{path: 'general-management' , component: GeneralManagementComponent , 
children : [
{path: 'list-site' , component: ListComponent}
]}
];