Angular 2路由组件无法正常呈现

Question

我在测试项目中使用了角度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。同时点击你添加新的事件按钮，只显示新的事件表单组件，而不是显示在短划线内的表单域。 我希望通过替换事件组件来使表单组件在短划线内消失。

1. 如何在短划线页面上为左侧菜单添加相同的路由选项，以便我可以在右侧显示相应的组件。

Answer 1

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

一种选择是跳过路线并使用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存在于您的路线中。