Angular 命名路由器出口不工作

我很难让命名的路由器插座在我的角度应用程序中工作。下面的模板有工作代码，下面是我尝试过的两个单独的东西，它们被注释掉了。它们完全带下划线，并导致此错误：

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>&nbsp;
          <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>&nbsp;
          <a [routerLink]="['process-user']">Approve/Deny User Requests</a>
        </li>
        <br>
        <li>
          <i class="fa fa-users"></i>
          <a [routerLink]="['pending-user']">&nbsp;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.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'
    // });

}

从'@angular/core'导入{Component，OnInit，Inject}；
从“rxjs/Observable”导入{Observable}；
从'@angular/common/http'导入{HttpClient}；
从“@syncfusion/ej2 grids”导入{DataStateChangeEventArgs，Sorts，DataSourceChangedEventArgs}；
从“/../../shared/Services/UserManagement/User.service”导入{UserService}；
从'@angular/forms'导入{FormsModule}；
导入'rxjs/add/operator/map'；
从“../../router.animations”导入{routerTransition，slideToRight}”；
进口{
GridComponent、工具栏项、过滤器设置模型、编辑设置模型、ContextMenuItem
}来自“@syncfusion/ej2 ng grids”；
从“@syncfusion/ej2弹出窗口”导入{Dialog}；
从“@syncfusion/ej2 list”导入{FieldSettingsModel}”；
从“../../shared/models/Users.model”导入{Users}；
@组成部分({
选择器：“应用程序用户管理”，
templateUrl:'./user management.component.html'，
样式URL:['./用户管理.component.css']，
动画：[slideToRight（）]
})
/**用户管理组件*/
导出类UserManagementComponent实现OnInit{
公共数据：可观察；
公共页面选项：对象；
公共编辑设置：对象；
公共工具栏：字符串[]；
公共状态：DataStateChangeEventArgs；
公共用户：用户[]；
公共过滤器设置：过滤器设置模型；
公共contextMenuItems:ContextMenuItem[]；
公共网格：网格组件；
公共错误消息=”；
restoreMax=true；
/**用户管理*/
构造函数（private\u userService:userService）{
这个.getUsersData（）；
this.data=this.\u用户服务；
}
getUsersData（）：void{
这是。_userService.getAllUsers（）
.subscribe（（response）=>{this.users=response；}，
（error）=>{this.errorMessage=error.Message；}）；
}
公共dataStateChange（状态：DataStateChangeEventArgs）：无效{
此._userService.execute（state）；//用于绑定数据。
}
公共数据源已更改（状态：DataSourceChangedEventArgs）：无效{
如果（state.action=='add'）{
这个.u userService.addUser（state.subscribe（（）=>state.endEdit（））；
}else if（state.action==='edit'）{
这个.u userService.updateUser（state.subscribe（（）=>state.endEdit（））；
}else if（state.requestType==='delete'）{
这个.u userService.deleteUser（state.subscribe（（）=>state.endEdit（））；
}
}
ngOnInit（）：void{
//document.querySelector（'.new user input'）。scrollIntoView({
//行为：“平滑”
// });
}

想象您编写了javascript代码：

var routerLink = [{ outlets: { new-user: ['new-user'] } } ];

这行得通吗？我想不行

因为看这个，我们可以得出结论，您正在使用减法

new-user

模板中的相同行为

为了确定路线：

[routerLink]="[{ outlets: { new-user: ['new-user'] } } ]"
                            ^^^^^^^^

考虑使用如下引号

[routerLink]="[{ outlets: { 'new-user': ['new-user'] } } ]"
                            ^^^^^^^^^^

---

假设您编写了javascript代码：

var routerLink = [{ outlets: { new-user: ['new-user'] } } ];

这行得通吗？我想不行

因为看这个，我们可以得出结论，您正在使用减法

new-user

模板中的相同行为

为了确定路线：

[routerLink]="[{ outlets: { new-user: ['new-user'] } } ]"
                            ^^^^^^^^

考虑使用如下引号

[routerLink]="[{ outlets: { 'new-user': ['new-user'] } } ]"
                            ^^^^^^^^^^

---

嗨，yurzui，谢谢。这肯定会让错误消失…仍然无法让它工作，没有一个教程有这种语法，但我会继续尝试，你能举一个stackblitz的例子吗？stackblitz在我的工作地点不工作，因为政策限制，但当我回家后，我可以构建one@imnickvaughnstackblitz能解决什么问题给你的公司？告诉你的系统管理员。你试过了吗[？@RoyiNamir我不是安全专家：）但是…这是一个不允许window.localStorage的策略，这是许多常见的攻击载体之一。前端是这家公司的一个新部门。我们将很快得到一个VM。在此之前，谢谢，我完全忘记了ng run。它的工作…不能像其他人一样使用localStorage。h我是yurzui，谢谢。这肯定会让错误消失…仍然无法让它工作，没有一个教程有这种语法，但我会继续尝试，你能举一个stackblitz的例子吗？stackblitz在我的工作地点不工作，因为政策限制，但当我回家后，我可以构建one@imnickvaughnstackblitz能解决什么问题o你的公司？告诉你的系统管理员。你试过了吗[？@RoyiNamir我不是安全专家：）但是…这是一个不允许window.localStorage的策略，这是许多常见的攻击载体之一。前端是这家公司的一个新部门。我们将很快得到一个VM。在此之前，谢谢，我完全忘记了ng run。它的工作…不能像其他人一样使用localStorage。