angular - 如何通过 localhost 访问我的子路由?
问题描述
嗨,我无法访问我的意思是当我输入时的子路由
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>
我使用 Angular 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__()
解决方案
我只需要创建新的 div 并在新的 div 中调用router-outlet并且它运行良好:)
推荐阅读
- java - 无法获取信息 Java
- python - 使用列表作为惩罚的张量流中的自定义损失函数
- mysql - mysqldump 创建的行多于主键的实际范围
- ios - 带有自定义后端的 Firebase 身份验证
- android - 离子本机串行返回设备未找到
- clojure - clojure - 是素数吗?质数
- laravel - 如何在 Laravel 中对请求使用自定义翻译?
- django - Selenium 停止与 Firefox 合作,与 Safari 合作
- csv - 如何使用 exiftool 将文件重命名为 CSV 导入文件中包含的新名称
- java - RandomAccessFile 不适用于 Minecraft Forge