Именованные розетки не работают

Question

У меня проблемы с получением именованных маршрутизаторов для работы в моем угловом приложении. В приведенном ниже шаблоне есть рабочий код, а под ним две отдельные вещи, которые я пробовал, которые закомментированы. Они полностью подчеркнуты и вызывают эту ошибку:

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 \ приложение \ расположение \ пользовательского управления \ пользовательского 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 \ приложение \ расположение \ пользовательского управления \ управления пользователями-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 \ приложение \ расположение \ управления пользователями \ 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'
    // });

}

Answer 1

Представьте, что вы написали код JavaScript:

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

Будет ли это работать? Я думаю, что не будет.

Поскольку, глядя на это, мы можем сделать вывод, что вы используете вычитание new - user

То же поведение в вашем шаблоне.

Чтобы исправить маршрут:

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

Попробуйте использовать кавычки, такие как

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