Question

我正在尝试在Angular 4中实现一个包含详细信息的基本列表。

我有以下路线：

{
    path: 'list',
    component: ListComponent,
    children: [
      {
        path: 'detail',
        component: DetailComponent,
      }
}

我在<router-outlet></router-outlet>中有一个ListComponent。当您单击ListComponent到子路径的链接时，一切正常。但是，当您直接在浏览器中输入链接时，我收到以下错误：

无法找到要加载的主要插座

我认为当您导航到子路由时，它会自动加载父组件。我错过了什么吗？如何实现它以便我也可以直接导航到URL？

更新：以下是ListComponent文件：

<div *ngIf="!loadingData">
    <ul>
        <li *ngFor="let listItem of lists">
            <a href="#">{{ listItem.name }}</a>
        </li>
    </ul>
    <router-outlet></router-outlet>
</div>

Answer 1

ListComponent有*ngIf，当它解析为false时，意味着<router-outlet>不在DOM中，从而导致错误。你应该将它移到*ngIf

之外

<div *ngIf="!loadingData">
    <ul>
        <li *ngFor="let listItem of lists">
            <a href="#">{{ listItem.name }}</a>
        </li>
    </ul>
</div>
<router-outlet></router-outlet>

Answer 2

这里可能存在的是当您使用父链接路由到子组件时，将显示低数据，并且当路由器出口位于ngif内时，它将被填充。

但是现在当您使用子链接直接点击URL时，if块将包含数据并且子路径未显示

直接链接到Angular 4中的儿童路线

2 个答案: