尽管 URL 正确，Angular Router 仍不加载我的组件

Question

我正在尝试使用我的路由器加载我的 Angular 组件，但它从未显示或抛出错误。

应用路由模块

  { path: '', redirectTo: '/home', pathMatch: 'full' },
  {
    path: 'home', component: HomeComponent, children:
      [
        { path: 'compare', component: CompareComponent, children:[] },
        {
          path: 'settings', component: SettingsComponent, children: [
            { path: 'new', component: ServerConnectionEditComponent }
          ]
        },
      ]
  },

应用服务器连接

  constructor(private router:Router, private route:ActivatedRoute) { }
  onAddServer()
  {
    console.log(this.route.url)
    this.router.navigate(['new'], {relativeTo: this.route});
  }

该 URL 似乎有效，因为任何其他 URL 都会引发错误。

应用程序服务器连接编辑

  ngOnInit() {
    console.log("in Edit") //never gets here
  }

服务器connections.component.html

...
<th scope="col"><button type="button" class="btn btn-success btn-sm"
                  (click)="onAddServer()">+</button></th>

应用组件.html

<app-header></app-header>
<div class="container">
  <div class="row">
    <div class="col-md-12"> 
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

settings.component.html

<div class="container">
  <div class="row">
    <div>
      <div class="col-md-12" >
        <h4>Server Connections:</h4>
      </div>
      <br/>
      <div class="col-xs-12">
          <app-server-connections [serverConnections]="serverConnections"></app-server-connections>
      </div>
    </div>
  </div>
</div>

Answer 1

您的路线中只能有 1 个级别的嵌套子项。 所以像这样改变你的路线。 如果这不起作用，请打开浏览器控制台查看是否有任何错误

{
    path: 'home', component: HomeComponent, children:
    [
        { path: 'compare', component: CompareComponent },
        {
            path: 'settings/new', component: ServerConnectionEditComponent

        },
        { path: 'settings', component: SettingsComponent }
    ]
}

并确保在 app.component.html 中添加<router-outlet></router-outlet>

Answer 2

更具体的必须在不太具体的之前按顺序排列。 因此，settings/new 必须在设置之前按顺序排列。