在我的应用程序中，我使用路由器显示了三个组件。
export const routing = RouterModule.forRoot([
{ path: '', component: HomeListComponent },
{ path: 'badge', component: BadgeListComponent},
{ path: 'badge-form', component: BadgeFormComponent },
{ path: 'badge-form/:id', component: BadgeFormComponent }
]);
因为我想/badge/badge-form在 url 中有这样的东西，而不是/badge-form当我转到表单时，我将路由配置更改为：
{ path: '', component: HomeListComponent },
{
path: 'badge',
component: BadgeListComponent,
children: [
{ path: 'badge-form', component: BadgeFormComponent },
{ path: 'badge-form/:id', component: BadgeFormComponent }
]
}
不幸的是，它不起作用，我无法找到原因，BadgeListComponent即使我转到/badge/badge-formurl ，它也总是在加载。
BadgeListComponent 的 HTML 代码：
<div class="material-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title …我正在使用Angular 5开发Web应用程序.我是Angular with Typescript的新手.现在我正在为我的应用程序模块配置路由.但它不起作用并抛出错误.
这是我的index.html档案
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<router-outlet></router-outlet>
</body>
</html>
我在app-routing.module.tsapp文件夹下创建了一个文件.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
const routes: Routes = [
{ path: '', loadChildren: './web/web.module#WebModule' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
Import that routing class in …当他点击数据表行时,我会将用户重定向到另一个页面
在HTML中
<p-table [value]="users" selectionMode="single" [(selection)]="selectedUser" dataKey="uid" (onRowSelect)="selectedUserDetails($event)" styleClass="tab-result">
在TS文件中
selectedUserDetails(userDetails) {
console.log(userDetails);
console.log("enterhere"); // is printed on console dev
this.router.navigate['/userdetails'];
}
在模块路由中
const routes: Routes = [
{
path: "",
component: AdministrationComponent,
children: [
{ path: "", component: ResulTabComponent, pathMatch: "full" },
{ path: "userdetails", component: UserDisplayComponent }
]
}
];
对于信息管理路由在此路径上延迟加载 http://localhost:4200/administration
userdetails应该是 http://localhost:4200/administration/userdetails
在管理组件中
<router-outlet></router-outlet>
我的问题是,点击时我没有被重定向到userdetails页面,但是当我从url栏导航到/ userdails时,我看到了组件
错误说->
src/app/app-routing.module.ts(29,14) 中的错误：错误 TS2322：类型 '{ path: string; 组件：字符串；}[]' 不可分配给类型 'Route[]'。输入'{路径：字符串；组件：字符串；}' 不可分配到类型 'Route'。属性“组件”的类型不兼容。类型 'string' 不能分配给类型 'Type'。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes } from '@angular/router';
import { SliderComponent } from './slider/slider.component';
import { SignupFormComponent } from './signup-form/signup-form.component';
@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class AppRoutingModule { }
export const routes: Routes = [
{path : 'ImgSlider' , component: 'SliderComponent'},
{path : 'signup' , component: 'SignupFormComponent'},
];
使用 Angular 7.x，我想根据子路由以及它们是否被激活来更改我的父标头组件。所以就我而言
AppComponent
Feature Module <= detect changes here
Child Components of feature module
所以我的路由非常简单，app-routing.module只包含使用loadChildren加载功能模块，这里没什么花哨的。
然后这个功能模块包含子组件的路由。有一个父组件，我们称其ParentComponent为包含路由器出口的组件。我还想根据孩子的情况相应地更改一些标题。
所以我有两个子组件：create和 ' :id'（详细信息页面）。当我触发这些路由时，我需要父组件相应地更改其文本内容。因此，例如，当触发创建页面时，我想添加标题：“创建新项目”，对于 :id 页面，我想显示“详细信息页面”。
现在，我发现我需要订阅路由器事件或激活的路由（或快照）。我在这里不知所措，所以我真的不知道在这里做什么。
我的父组件现在看起来像这样：
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'parent-component',
templateUrl: './parent.component.html',
})
export class ParentComponent implements OnInit {
title = 'Parent Title';
// Check if it is possible to change the title according to the route
subtitle = 'Parent subtitle';
constructor(private readonly router: …