角度経路は別のプレフィックスを使用する必要がありますか？

Question

私は2つのルートを定義しています。

/りんご---> AppleComponent、

/リンゴ/：ID ---> AppleDetailComponent、

私が訪問/リンゴ/ 111は、それは最初、AppleComponentに入りますAppleDetailComponentに移動します。

私は何をすればいいのですか？/ apples /：訪問/リンゴ/：idの場合はidですか？

私はhavaでも{pathMatch： 'full'}を試しましたが、動作しません。

角度チュートリアル二つの異なるルートを使用します。

/英雄

/詳細/：

をheroId、それは別の接頭辞を使用する必要がありません？

===更新======= @ im.pankratov私のルートはあなたのものとまったく同じです。

最後に私は問題が見つかったリンゴはnullです。

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

ルートを正しく定義する必要があります。ここでの主なものはroutes一定である

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 { } 

：たとえば、これは次のように独立したモジュールのためのあなたのルート設定を見ることができる方法です。