0

我想实现一个像 Ryanair's checkout 这样的页面www.ryanair.com/es/es/booking/extras (but first you have to select a flight)，当你点击一个按钮时，路线会改变for example to .../extras/bags并打开一个带有行李选项的 sidenav，而无需更改主页。

此外，如果您手动添加/bags到路线，sidenav 仍然打开。

我有 sidenav 的所有不同元素，但我不知道如何将它们与路线联系起来。

我试过<router-outlet name="sidenav"></router-outlet>在sidenav里面使用一个额外的，但我不能自动打开它

4

1 回答 1

1

假设您的 sidenav 在另一个组件中，我们将其称为 MainComponent，那么 MainComponent 的模板将如下所示：

<div>Home Page</div>
<button>Hello</button>
<mat-sidenav #bagsSidenav> ... </mat-sidenav>

首先，您需要在您的应用模块或路由文件中设置路由。它应该看起来像这样：

const routes: Routes = [
    { path: 'main/:openSidenav', component: MainComponent},
];

路由的 :openSidenav 部分基本上表示如果用户在路由中键入 www.mywebsite.com/main/bags，那么“bags”就是传递给 openSidenav 参数的值。

然后，您需要在构造函数中将 Angular 路由器注入 MainComponent。然后你可以订阅路由参数来检查路径是否包含包，然后打开sidenav：

@ViewChild('bagsSidenav') public bagsSidenav: MdSidenav;
...

constructor(private router: Router) { }

ngOnInit() {
    this.route.params.subscribe((params) => {
         if (params.openSidenav === 'bags') {
             bagsSidenav.open();
         }
    }
}
于 2018-04-13T21:37:36.150 回答