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存在於您的路線中。