Angular 4 - völlig Weg zu neuer Komponente

Question

I routerLink von aktuellen component neuen 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> 

Nach dem Klicken auf Add New Taste navigiert bin mit macht es /add-form Router Komponentenansicht

<router-outlet></router-outlet>

zusammen mit allen anderen HTML-Elementen.

EDIT

Für Routing habe ich folgenden Code -

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

Wenn Benutzer klicken Sie auf Add New Taste, ich möchte der Benutzer auf AddFormViewComponent Ansicht bewegen anstatt das Hinzufügen AddFormViewComponent Ansicht innerhalb des aktuellen component.

Answer 1

es wie dieses

<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

sein sollte Wenn ich gut verstanden, was Sie tun möchten, müssen Sie zwei Routen erstellen.

Ich benutze, um ein Routing-Modul zu erstellen. 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 {} 

In den app.module.ts, fügen Sie das Routing-Modul Import:

imports: [ 
    ..., 
    AppRoutingModule ] 

Die app.component.html kann immer nur eine Zeile enthalten:

<router-outlet></router-outlet> 

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

Die Komponente component2.component.html sollte nicht geändert werden.