角度路由必須使用不同的前綴嗎？

Question

我已經定義了兩條路線。

/蘋果---> AppleComponent，

/蘋果/：ID ---> AppleDetailComponent，

當我訪問/蘋果/ 111，它會先進入AppleComponent，然後進入AppleDetailComponent。

我該怎麼做，它會匹配/蘋果/：身份證時訪問/蘋果/：身份證？

我hava也嘗試{pathMatch：'full'}但它不起作用。

角教程使用兩種不同的路線：

/英雄

/細節/：heroId

它必須使用不同的前綴??

===更新======= @ im.pankratov我完全像你的定義我的路線。

終於我發現問題是蘋果是空的。

export class AppleDetailComponent implements OnInit { 
constructor(
private appleService:AppleService, 
private route:ActivatedRoute, 
private location:Location 
) { 
} 

@Input() apple: Apple; 

ngOnInit() { 
this.route.params.switchMap((params:Params) => this.appleService.getApple(params['id'])) 
.subscribe(apple => { 
this.apple = apple 
}); 
} 

如果我添加* ngIf ='apple'，錯誤將會消失。

<div class="container" *ngIf='apple'> 
    <h1>{{apple.title}} {{apple.desc}}</h1> 
</div> 

在ngOnInit完成後，html如何渲染？

Answer 1

您需要正確定義路由。例如，這是一個獨立的模塊，您的路由配置怎麼可能是這樣的：

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { AppleComponent } from './path/to/apple.component'; 
import { AppleDetailComponent } from './path/to/apple-detail.component'; 

const routes: Routes = [ 
    { 
    path: 'apples', children: [ 
     { path: '', component: AppleComponent }, 
     { path: ':id', component: AppleDetailComponent}, 
    ] 
    }, 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule], 
    providers: [] 
}) 
export class AppleRoutingModule { } 

這裏最主要的是routes不變。