javascript - Angular 2 路由组件无法正确渲染

Question

我在我的测试项目中使用 Angular 2 路由。已在 Module.ts 中导入路由。我的应用程序上的仪表板页面面临问题。 Dash page of App

此破折号组件包含一个事件组件，其中包含一个添加事件按钮和事件列表，如图所示。我需要为添加新事件按钮添加路由，以便我可以渲染另一个用于创建新事件(事件表单)的组件。所以我为该按钮添加了 routerlink，如下所示

<button type="button" routerLink="/addevent" class="btn btn-primary">Add Event</button>

<div class="container">

    <table class="table table-hover">
    <thead>
    
   
        <tr>
            
            <th>Title</th>
            <th>Created</th>
            <th>Modified</th>
            <th>Place</th>
            <th>Task Title</th>
            <th class="text-center">Action</th>
        </tr>
    </thead>
            


            <tr *ngFor="let evnt of events">
                
                <td>{{evnt.title}}</td>
                <td>{{evnt.created}}</td>
                <td>{{evnt.modified}}</td>
                <td>{{evnt.place}}</td>
                <td>{{evnt.task.title}}</td>
                <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td>
            </tr>
    </table>
    </div>

并在破折号组件html中添加了路由器导出，因为我希望通过替换事件组件在破折号页面中显示新的表单字段组件。

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Reports</a></li>
        <li><a href="#">Analytics</a></li>
        <li><a href="#">Export</a></li>
      </ul>

    </div>


     <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
       <router-outlet>
        <h2 class="sub-header">Section title</h2>              
          <event></event>                        
        </div>
      </router-outlet>

  </div>
</div>

问题:

1.单击添加新事件按钮时，仅显示新事件表单组件，而不是 dash 内显示的表单字段。我希望通过替换事件组件来将表单组件显示在破折号内。

如何在仪表板页面上为左侧菜单添加相同的路由选项，以便我可以在右侧渲染相应的组件。

Answer 1

如果您的事件是仪表板组件的一部分，则不能简单地将其替换为新表单。您说您的仪表板上有一个路由器 socket ，这意味着单击按钮时，新表单应与事件一起呈现在仪表板组件上。但您希望用表单替换事件。

一种选择是跳过路线并使用 div、隐藏和显示事件或新表单，具体取决于用户选择的内容和 bool 值。

否则，请将路由器 socket 放在仪表板上，并将 events 和 addevent 作为子组件。如果您选择此选项，您的路线应如下所示:

.....

path: 'dash',
component: DashboardComponent,
children: [
    {   // shows events as default
        path: '',
        redirectTo: 'events',
        pathMatch: 'full' // as per OP's comment, this needs to be added
    },
    {   
        path: 'events', 
        component: EventsComponent,
    },
    {  
        path: 'addevent',
        component: NewEventComponent,
    },
]

....

在您的仪表板上您有

<div>
  <!-- Dashboard Content here -->
  <button routerLink="/events" class="btn btn-primary">All Events</button>
  <button routerLink="/addevent" class="btn btn-primary">Add Event</button>
</div>

<!-- Either events or new event form rendered here -->
<router-outlet></router-outlet>

值得注意:routerlink 中的破折号似乎至少在我测试时有效，但 OP 评论说需要将其删除。