Angular 6 路由器导航未在目标组件中呈现子组件
Angular 6 Router navigation not rendering child component in the destination component
我有一个带有登录组件和仪表板组件的 Angular 6 应用程序。
我正在尝试在登录按钮单击事件中导航到 DashboardComponent。
DashboardComponent 包含一个名为 WardComponent 的子组件。
但是在导航到仪表板时,它只呈现子组件以外的内容 ward.How 我可以在登录后呈现带有子组件的仪表板组件吗?
请看下面我的组件类
应用组件
<router-outlet></router-outlet>
LoginComponent.ts
export class LoginComponent {
constructor(private router: Router) {}
login() {
this.router.navigate(["/dashboard/"]);
}
}
DashboardComponent
import { Component } from "@angular/core";
@Component({
selector: "dashboard",
template: `
haii u r in dashboard compo
<div class="form-inline" style="padding: 40px;">
<ward *ngFor="let ward of wards" [wardNumber]="ward"></ward>
</div>
`
})
export class DashboardComponent {
constructor() {}
}
WardComponent.ts
import { Component, Input } from "@angular/core";
@Component({
selector: "ward",
template: `
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header"></div>
<div class="card-body">
<h2 class="card-title">{{ wardNumber + 1 }}</h2>
<button class="btn btn-primary" (click)="checkIn()">check in</button>
<button class="btn btn-primary" (click)="checkOut()">check Out</button>
</div>
</div>
`
})
export class WardComponent {
@Input() wardNumber: Number;
checkedIn: boolean = false;
constructor() {}
checkIn() {
console.log("checked in");
this.checkedIn = true;
}
checkOut() {}
}
app.module.ts
const indexRoutes: Route = {
path: "",
component: DashboardComponent
};
// for all invalid routers , it will redirect to login component
const fallbackRoutes = {
path: "**",
component: LoginComponent
};
const routes: Routes = [
indexRoutes,
{
path: "dashboard",
component: DashboardComponent
},
{
path: "ward",
component: WardComponent
},
fallbackRoutes
];
@NgModule({
declarations: [
AppComponent,
WardComponent,
LoginComponent,
DashboardComponent
],
imports: [BrowserModule, RouterModule.forRoot(routes)],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
只需像这样更改您的 Routes
配置:
const routes: Routes = [
{
path: "dashboard",
component: DashboardComponent,
children: [{
path: "ward",
component: WardComponent
}]
},
{
path: "",
pathMatch: "full",
redirectTo: "/dashboard"
},
{
path: "**",
component: LoginComponent
}
];
@NgModule({...})
export class AppModule {}
我在 path: ''
中添加了一个 pathMatch: 'full'
和一个 redirectTo: '/dashboard'
。我还摆脱了 const
s,然后将那些 const
s 的路由添加到 routes
const
本身。
您还必须在 DashboardComponent
的模板中添加 <router-outlet></router-outlet>
这是因为 ward 组件的内容没有正确填充。我在错误的地方添加了 wards 的内容,而不是在 WardComponent 中添加 wards 数组,我把它放在 AppComponent 中。
将 Ward 路由添加到 children 数组中
const routes: Routes = [
indexRoutes,
{
path: "dashboard",
component: DashboardComponent,
children:[
{
path: "ward",
component: WardComponent
}]
},
fallbackRoutes
];
我有一个带有登录组件和仪表板组件的 Angular 6 应用程序。 我正在尝试在登录按钮单击事件中导航到 DashboardComponent。 DashboardComponent 包含一个名为 WardComponent 的子组件。 但是在导航到仪表板时,它只呈现子组件以外的内容 ward.How 我可以在登录后呈现带有子组件的仪表板组件吗?
请看下面我的组件类
应用组件
<router-outlet></router-outlet>
LoginComponent.ts
export class LoginComponent {
constructor(private router: Router) {}
login() {
this.router.navigate(["/dashboard/"]);
}
}
DashboardComponent
import { Component } from "@angular/core";
@Component({
selector: "dashboard",
template: `
haii u r in dashboard compo
<div class="form-inline" style="padding: 40px;">
<ward *ngFor="let ward of wards" [wardNumber]="ward"></ward>
</div>
`
})
export class DashboardComponent {
constructor() {}
}
WardComponent.ts
import { Component, Input } from "@angular/core";
@Component({
selector: "ward",
template: `
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header"></div>
<div class="card-body">
<h2 class="card-title">{{ wardNumber + 1 }}</h2>
<button class="btn btn-primary" (click)="checkIn()">check in</button>
<button class="btn btn-primary" (click)="checkOut()">check Out</button>
</div>
</div>
`
})
export class WardComponent {
@Input() wardNumber: Number;
checkedIn: boolean = false;
constructor() {}
checkIn() {
console.log("checked in");
this.checkedIn = true;
}
checkOut() {}
}
app.module.ts
const indexRoutes: Route = {
path: "",
component: DashboardComponent
};
// for all invalid routers , it will redirect to login component
const fallbackRoutes = {
path: "**",
component: LoginComponent
};
const routes: Routes = [
indexRoutes,
{
path: "dashboard",
component: DashboardComponent
},
{
path: "ward",
component: WardComponent
},
fallbackRoutes
];
@NgModule({
declarations: [
AppComponent,
WardComponent,
LoginComponent,
DashboardComponent
],
imports: [BrowserModule, RouterModule.forRoot(routes)],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
只需像这样更改您的 Routes
配置:
const routes: Routes = [
{
path: "dashboard",
component: DashboardComponent,
children: [{
path: "ward",
component: WardComponent
}]
},
{
path: "",
pathMatch: "full",
redirectTo: "/dashboard"
},
{
path: "**",
component: LoginComponent
}
];
@NgModule({...})
export class AppModule {}
我在 path: ''
中添加了一个 pathMatch: 'full'
和一个 redirectTo: '/dashboard'
。我还摆脱了 const
s,然后将那些 const
s 的路由添加到 routes
const
本身。
您还必须在 DashboardComponent
<router-outlet></router-outlet>
这是因为 ward 组件的内容没有正确填充。我在错误的地方添加了 wards 的内容,而不是在 WardComponent 中添加 wards 数组,我把它放在 AppComponent 中。
将 Ward 路由添加到 children 数组中
const routes: Routes = [
indexRoutes,
{
path: "dashboard",
component: DashboardComponent,
children:[
{
path: "ward",
component: WardComponent
}]
},
fallbackRoutes
];