Question

我正在使用routerLink从当前component导航到新component

<div class="form-list-container">
<h3>Contact Form</h3>
<button md-raised-button routerLink="/add-form" 
routerLinkActive="active">Add New</button>

<all-forms></all-forms>

<router-outlet></router-outlet>
</div>

点击Add New按钮后，它会将/add-form路由器组件视图呈现为

<router-outlet></router-outlet>

以及所有其他HTML元素。

修改

对于路由我有以下代码 -

const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full'},
{ path: 'home',   component: AppComponent },
{ path: 'add-form',  component: AddFormViewComponent },
]

当用户点击Add New按钮时，我希望用户继续AddFormViewComponent视图，而不是在当前AddFormViewComponent内添加component视图。

Answer 1

应该是这样的

<div class="form-list-container">
 <h3>Contact Form</h3>
 <button md-raised-button routerLink="/add-form" 
  routerLinkActive="active">Add New</button>

 <all-forms></all-forms>
</div>
<router-outlet></router-outlet>

Answer 2

如果我很清楚你想要做什么，你需要创建两条路线。

我用来创建一个路由模块。 app-routing.module.ts：

const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full'},
    { path: 'home',   component: Component1 },
    { path: 'add-form',   component: Component2 }
]

@NgModule({
    imports: [ RouterModule.forRoot(routes)],
    exports: [ RouterModule ]
})
export class AppRoutingModule {}

在app.module.ts中，添加路由模块导入：

imports: [
    ...,
    AppRoutingModule ]

app.component.html只能包含一行：

<router-outlet></router-outlet>

component1.component.html：

<div class="form-list-container">
<h3>Contact Form</h3>
<button md-raised-button routerLink="/add-form" 
routerLinkActive="active">Add New</button>

<all-forms></all-forms>

</div>

不应更改component2.component.html。

Angular 4 - 完全路由到新组件

2 个答案: