javascript - 尽管 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
  }

服务器连接.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

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

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

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

并确保添加 <router-outlet></router-outlet> 在你的 app.component.html 里面