通常のボタン（タブではなく）を使用してさまざまなコンポーネントにナビゲートする適切な方法は何ですか？

Question

私のアプリでは、タブではなくメニューでボタンを使うことにしました。それぞれのボタンが別のコンポーネントにつながるときに、このナビゲーションを行う正しい方法は何かを理解したいと思います。

だから私は今、試したものです、MainComponent.html：

<button md-button (click)="menuButtonClicked('component-one')">Button1</button> 
     <button md-button (click)="menuButtonClicked('component-two')">Button2</button> 

<h1>My App</h1> 

    <div *ngIf="shouldDisplayComponent1"> 
    <component-one [someList]="list"></component-one> 
    </div> 

    <div *ngIf="shouldDisplayComponent2"> 
    <component-two [someList]="list"></component-two> 
    </div> 

MainComponent.ts：

public shouldDisplayComponent1: boolean; 
public shouldDisplayComponent2: boolean; 

public menuButtonClicked(componentName: string) { 
    switch (componentName) { 
     case 'component-one': 
     this.shouldDisplayComponent1 = true; 
     this.shouldDisplayComponent2 = false; 
     case 'component-two': 
     this.shouldDisplayComponent2 = true; 
     this.shouldDisplayComponent1 = false; 
     default: 
     throw('No such component') 
    } 
    } 

ん意味をなさない？ない場合は、:) おかげ

Answer 1

は、さてあなたはRoutingモジュールを使用することを行うには、適切かつエレガントな方法は何かを教えてください<router-outlet>通常

ここAngular2の公式配線ガイドからの基本的なチュートリアルです：

@Component({ 
    moduleId: module.id, 
    selector: 'my-app', 
    template: ` 
    <h1>{{title}}</h1> 
    <nav> 
     <a [routerLink]="['/dashboard', {'list': list}]" routerLinkActive="active">Dashboard</a> 
     <a routerLink="/heroes" routerLinkActive="active">Heroes</a> 
    </nav> 
    <router-outlet></router-outlet> 
    `, 
    styleUrls: ['app.component.css'], 
}) 
export class AppComponent { 
    title = 'Tour of Heroes'; 
    list: any = ["my", "list"]; 
} 

は、

router-outletは、routerLinkが参照するコンポーネントになります。

@Component({...}) 
export class DashboardComponent { 
    constructor(private route: ActivatedRoute, private router: Router){ 
    this.route.params 
    .subscribe((params)=>{ 
     console.log(params['list']); 
    }); 
    } 
} 

フルplunker：方法GEに間に合わ経路PARAM（コンポーネント内部リストに

const routes: Routes = [ 
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, 
    { path: 'dashboard', component: DashboardComponent }, 
    { path: 'detail/:id', component: HeroDetailComponent }, 
    { path: 'heroes',  component: HeroesComponent } 
]; 

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

例：参考文献は、モジュールをルーティングルーティングモジュール

例で定義されています例：https://plnkr.co/edit/2pTCEXSXF8GxpTySyQZE?p=preview

ルーティングチュートリアル：https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

Answer 2

あなたのコンポーネントで機能をボタンのクリックイベントを処理することができます

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'navigation', 
    templateUrl: './navigation.component.html' 
}) 
export class NavigationComponent implements OnInit { 

    constructor(private router: Router) { 
    } 

    onClick(){ 
    this.router.navigate(['/myRoute']); 
    } 
} 

またはあなたのHTML内：

<a class="btn btn-default" routerLink="/route">Route</a> 
<button routerLink="/route">Route</button>