我无法让命名路由器插座在我的角度应用程序中工作。下面的模板有工作代码，然后下面是我尝试过的两个独立的东西，它们被注释掉了。它们被完全加下划线并导致此错误：
Parser Error: Missing expected : at column 18 in [[{ outlets: { new-user: ['new-user'] } } ]] in @31:13
我需要使用命名的路由器插座，以便我可以在模板中的同一级别上获取路由项目，以便在它们上正确使用 cssFlex 或 cssGrid。我很感激你能提供的任何见解！如果您投反对票，请说明原因，以便我改进这个问题。谢谢。
我已经阅读了无数关于命名和嵌套路由器插座的资源，但发现这是最简单的。
模板：C:\Users\nvaughn\Documents\TFSHome\GWConnect\src\Gwi.WebUI\ClientApp\src\app\layout\user-management\user-management.component.html
<div class="blade-dashboard">
<div class="blade-container">
begining
<div class="blade" [@routerTransition]>
<div class="blade-header">
<h1>User Management</h1>
<div class="window-functions">
<i class="fa fa-window-minimize"></i>
<a routerLink="/dashboard" [routerLinkActive]="['router-link-active']">
<i class="fa fa-window-close"></i>
</a>
</div>
</div>
<ul>
<li>
<i class="fa fa-users"></i>
<a [routerLink]="['new-user']">New User Request</a>
<!-- <a [routerLink]="['new-user', {outlets: {new-user:['new-user'], new-user-input: ['new-user-input']}}]">New User Request</a> -->
<!-- <a [routerLink]="[{ outlets: { new-user: ['new-user'] } } ]">New User Request</a> -->
</li>
<br>
<li>
<i class="fa fa-users"></i>
<a [routerLink]="['process-user']">Approve/Deny User Requests</a>
</li>
<br>
<li>
<i class="fa fa-users"></i>
<a [routerLink]="['pending-user']"> Pending User Requests</a>
</li>
</ul>
</div>
middle
<router-outlet name='new-user'></router-outlet>
<router-outlet name='new-user-input'></router-outlet>
end
</div>
</div>
路由模块：C:\Users\nvaughn\Documents\TFSHome\GWConnect\src\Gwi.WebUI\ClientApp\src\app\layout\user-management\user-management-routing.module.ts
import { PendingUserComponent } from './pending-user/pending-user.component';
import { ProcessUserComponent } from './process-user/process-user.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule, RouterOutlet } from '@angular/router';
import { UserManagementComponent } from "./user-management.component";
import { NewUserComponent } from './new-user/new-user.component';
import { NewUserInputComponent } from './new-user/new-user-input/new-user-input.component';
const routes: Routes = [
{
path: '',
component: UserManagementComponent,
children: [
// { path: "", redirectTo: "new-user" },
{
path: 'new-user',
component: NewUserComponent,
outlet: 'new-user',
children: [
{
path: 'new-user-input',
component: NewUserInputComponent,
// outlet: 'new-user-input',
}
]
},
{ path: 'process-user', component: ProcessUserComponent },
{ path: 'pending-user', component: PendingUserComponent }
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
declarations: [NewUserComponent, ProcessUserComponent, PendingUserComponent, NewUserInputComponent],
exports: [RouterModule]
})
export class UserManagementRoutingModule {
}
不要认为这很重要，但无论如何都包括在内... 组件：C:\Users\nvaughn\Documents\TFSHome\GWConnect\src\Gwi.WebUI\ClientApp\src\app\layout\user-management\user-management.component。 ts
import { Component, OnInit, Inject } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
import { DataStateChangeEventArgs, Sorts, DataSourceChangedEventArgs } from '@syncfusion/ej2-grids';
import { UserService } from './../../shared/Services/UserManagement/User.service';
import { FormsModule } from '@angular/forms';
import 'rxjs/add/operator/map';
import { routerTransition, slideToRight } from "../../router.animations";
import {
GridComponent, ToolbarItems, FilterSettingsModel, EditSettingsModel, ContextMenuItem
} from '@syncfusion/ej2-ng-grids';
import { Dialog } from "@syncfusion/ej2-popups";
import { FieldSettingsModel } from "@syncfusion/ej2-lists";
import { Users } from '../../shared/models/users.model';
@Component({
selector: 'app-user-management',
templateUrl: './user-management.component.html',
styleUrls: ['./user-management.component.css'],
animations: [slideToRight()]
})
/** UserManagement component*/
export class UserManagementComponent implements OnInit {
public data: Observable<DataStateChangeEventArgs>;
public pageOptions: Object;
public editSettings: Object;
public toolbar: string[];
public state: DataStateChangeEventArgs;
public users: Users[];
public filterSettings: FilterSettingsModel;
public contextMenuItems: ContextMenuItem[];
public grid: GridComponent;
public errorMessage = "";
restoreMax = true;
/** UserManagement ctor */
constructor(private _userService: UserService) {
this.getUsersData();
this.data = this._userService;
}
getUsersData(): void {
this._userService.getAllUsers()
.subscribe((response) => { this.users = response; },
(error) => { this.errorMessage = error.Message; });
}
public dataStateChange(state: DataStateChangeEventArgs): void {
this._userService.execute(state); // for binding the data.
}
public dataSourceChanged(state: DataSourceChangedEventArgs): void {
if (state.action === 'add') {
this._userService.addUser(state).subscribe(() => state.endEdit());
} else if (state.action === 'edit') {
this._userService.updateUser(state).subscribe(() => state.endEdit());
} else if (state.requestType === 'delete') {
this._userService.deleteUser(state).subscribe(() => state.endEdit());
}
}
ngOnInit(): void {
// document.querySelector('.new-user-input').scrollIntoView({
// behavior: 'smooth'
// });
}