将 Link 指向 Angular 中的子路由 4

Question

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

我有以下路线：

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

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

Cannot find primary outlet to load

我以为当你导航到子路由时，它会自动加载父组件。我错过了什么吗？我如何实现它以便我也可以直接导航到 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

这里可能存在的问题是，当您使用父组件路由到子组件时 link 将出现低数据，并且由于路由器出口位于 ngif 内部，因此它会被填充。

但是现在当你直接用子link点击URL时，if块将有数据并且子路由不显示

Answer 2

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>

将 Link 指向 Angular 中的子路由 4

Direct Link to Child Route in Angular 4

angular2-routing

angular