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 内的表单字段。 我希望通过替换事件组件将表单组件显示在破折号内。

1. 如何在仪表板页面上为左侧菜单添加相同的路由选项，以便在右侧呈现相应的组件。

Answer 1

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

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

否则，您的仪表板上有路由器插座，并将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 评论说它需要删除。

Answer 2

对不起，我不能写评论，但我会把它放在答案中。

回答问题 1：

如果您的路线定义明确，它应该可以工作。您的路线中有/addevent 路线吗？可以发一下路线吗？

另一种方法是：在您的 html 文件中将按钮替换为：

<button type="button" (click)="addEvent()" class="btn btn-primary">Add Event</button>

在您的组件中，添加以下内容：

addEvent(): void {
    this.router.navigate(['/newEvent']);
}

确保在组件中导入路由器：

import { Router } from '@angular/router';

您的构造函数包含路由器：

constructor(private router: Router) {}

在您的路线中，您应该有这条​​路线：

{ path: 'newEvent', component: EventFormComponent }

当然还要定义你的 EventFormComponent

回答问题 2：

将href 替换为routerLink="/the_name_of_your_route"

确保 name_of_your_route 存在于您的路线中。