英文:
How to create a child route that takes an exact word
问题
Here is the code:
{path: 'recipes', component: RecipesComponent, children:[
{path: ':id', component: RecipeDetailComponent},
{path: 'new', component: NewRecipeComponent }
]}
你想要如何设置 {path: 'new', component: NewRecipeComponent }，以便让 http://localhost:4200/recipes/new 打开 NewRecipeComponent 组件？
英文:
Here is the code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
{path : 'recipes', component:RecipesComponent, children:[
{path:':id', component:RecipeDetailComponent},
{path:':new', component:NewRecipeComponent }
]},
<!-- end snippet -->
Whatever link as :
http://localhost:4200/recipes/new, or
http://localhost:4200/recipes/12, or
http://localhost:4200/recipes/details
They all open the RecipeDetailComponent component.
How do i set {path:':new', component:NewRecipeComponent } so that http://localhost:4200/recipes/new opens NewRecipeComponent component?
答案1
得分: 1
如果你写：:new 或 :id，Angular 将会将它们解释为变量。如果你希望有一个固定的路径，你需要移除 :。
{ "path": "recipes", "component": "RecipesComponent", "children": [
{ "path": "new", "component": "NewRecipeComponent" },
{ "path": ":id", "component": "RecipeDetailComponent" }
]}
不要忘记，在 RecipesComponent 中，你还需要显示子组件。
这是通过以下方式完成的：
<router-outlet></router-outlet>
然后，http://localhost:4200/recipes/new 会打开 NewRecipeComponent 组件，放置在 RecipesComponent 组件内部。
英文:
If you write: :new or :id, angular will interpet them as variable.
If you desire a FIXED path, you need to remove the :.
{path : 'recipes', component:RecipesComponent, children:[
{path:'new', component: NewRecipeComponent }
{path:':id', component: RecipeDetailComponent},
]},
Don't forget that in RecipesComponent, you need also to display the children.
It's done with:
<router-outlet></router-outlet>
Then http://localhost:4200/recipes/new opens NewRecipeComponent component inside the component RecipesComponent
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论