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

Question

您好，我的意思是当我输入时，我无法访问子路由

localhost:4200/general-managment/list-site

这不会转到列表站点 HTML。

这是我的 list.component.ts：

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 中调用 router-outlet 并且它运行良好 :)

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}
           ]}
   ];