英文:
i can't navigate to router-outlet inside another
问题
以下是您要翻译的内容:
我在我的项目中有两个 router-outlet,并且一个嵌套在另一个内部,第一个是默认的应用 router-outlet,第二个位于 'home' 组件中,当我点击工具栏时,我想在其中显示其他组件,这是我找到的导航到第二个的解决方案<br>
HTML 文件:
<mat-toolbar >
<a routerLink="/sessionag">Session</a>
<button mat-button style="background-color: #80D0D0" (click)="logout()">logout</button>
</mat-toolbar>
<mat-drawer-container >
<mat-drawer-content style="color: #333333 ;background-color: white">
<router-outlet name="second"></router-outlet>
</mat-drawer-content>
</mat-drawer-container>
AppRoutingModule 文件:
const routes: Routes = [
{path:'sessionag',
component:SessionAgComponent,outlet:'second'},
];
但这对我来说不起作用,我不知道为什么。<br>
我做错了什么,还是它不像这样工作?
英文:
I have 2 router-outlet in my project and one inside on the other the first one is the default app router-outlet and the second one is inside one of the 'home' component in which I want to show other components when I click on the toolbarso this was the solution that I found to navigate to the second one <br>
html file :
<mat-toolbar >
<a routerLink="/sessionag">Session</a>
<button mat-button style="background-color: #80D0D0" (click)="logout()">logout</button>
</mat-toolbar>
<mat-drawer-container >
<mat-drawer-content style="color: #333333 ;background-color: white">
<router-outlet name="second"></router-outlet>
</mat-drawer-content>
</mat-drawer-container>
AppRoutingModule file :
const routes: Routes = [
{path:'sessionag',
component:SessionAgComponent,outlet:'second'},
];
but this is not working for me i don't know why .<br>
did i do something wrang or it does not work like this
答案1
得分: 2
If you're not navigating to the primary router, you have to tell angular what router-outlet
you want to route to.
Using the routerLink
directive you can specify the outlet you want to route to:
<a
[routerLink]="[{ outlets: {second: ['sessionag'] } }]">
Session
</a>
Demo on Stackblitz
英文:
If you're not navigating to the primary router, you have to tell angular what router-outlet
you want to route to.
Using the routerLink
directive you can specify the outlet you want to route to:
<a
[routerLink]="[{ outlets: {second: ['sessionag'] } }]">
Session
</a>
Demo on Stackblitz
答案2
得分: 1
在app-routing-module中,您需要将组件添加为另一个组件的子组件,以在第二个router-outlet中使用。具体如下所示:
// 在app-routing-module中
const routes: Routes = [
{
path: 'home',
component: HomepageComponent,
children: [
{
path: 'sessionag',
component: SessionAgComponent
},
{
path: 'sessiontek',
component: SessionTekComponent
}
]
}
];
在.ts文件中,您可以使用以下代码导航到所需的路由:
this.router.navigate(['/home/sessionag']);
在HTML文件中,您可以像这样使用router-outlet:
<router-outlet></router-outlet>
希望这有所帮助。
英文:
so what I was looking for actually is a router outlet inside another and the answer that I found is to add the component as children of the component in which I want to add the second router-outlet like this :<br>
in app-routing-module
const routes: Routes = [
{path:'home',
component:HomepageComponent,
children:[
{path:'sessionag',
component:SessionAgComponent},
{path:'sessiontek',
component:SessionTekComponent},
]
},
];
in the .ts file
this.router.navigate(['/home/sessionag']);
in HTML file
<router-outlet ></router-outlet>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论