2016-12-18 55 views
3

我讓角2。我正在學習路由的兩個不同的組成部分,從這個鏈接 https://angular.io/docs/ts/latest/tutorial/toh-pt5.html怎樣一條路線導航到另一個角2

我做兩個分量。在第一部分我有一個按鈕,我想移動移動到第二組件

這裏是我的代碼 https://plnkr.co/edit/GBOI9avZaPGaxaLQbtak

我定義這樣的

const routes =[ 
     { 
     path: 'ft', 
     component: First 
     }, 
     { 
     path: 'sd', 
     component: Second 
     } 
    ] 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App,First ,Second] 
}) 
路線0

我使用<router-outlet>

,但我不能一個組件移動到另一個

回答

4

你去那裏:

@Component({ 
    selector: 'first', 
    template: ` 
    <div> 
     <button (click)="moveToSecond()">move to secon comp</button> 
    </div> 
    `, 
}) 
export class First { 
    name:string; 
    constructor(private router:Router) { 
    } 

    moveToSecond(){ 
    this.router.navigate(['/sd']); 
    } 
} 

https://plnkr.co/edit/wIuaffLskQd8GJuqLlY6?p=preview

你有錯誤的堆:d

無論如何,爲了導航到另一條路線,你需要使用路由器

6

也可以瀏覽按鈕本身沒有調用組件功能

<button routerLink="/sd">move to secon comp</button> 
相關問題