Question

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

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

＆＃13;

<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>

＆＃13;

并在短划线组件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。单击时添加新事件按钮仅显示新事件表单组件，而不是显示在短划线内的表单字段。我希望通过替换事件组件来消除表单组件内部的消息。

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

Answer 1

抱歉，我无法发表评论，但我会在回答这个问题。

回答问题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。

Answer 2

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

一种选择是跳过路线并使用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>

值得注意的是：在路由器链接中使用破折号似乎至少在我测试时起作用，但是OP评论说它需要被删除。

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

2 个答案: