带路由的角度 mat-sidenav答案

【问题标题】：Angular mat-sidenav with route带路由的角度 mat-sidenav
【发布时间】：2018-04-13 20:14:23
【问题描述】：

我想实现一个像 Ryanair 的结帐 www.ryanair.com/es/es/booking/extras (but first you have to select a flight) 这样的页面，当您单击按钮时，路线会更改 for example to .../extras/bags 并打开带有行李选项的侧导航，而不更改主页。

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

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

我尝试在 sidenav 中使用额外的<router-outlet name="sidenav"></router-outlet>，但无法自动打开它

【问题讨论】：

标签： angular material-design angular-material sidenav

【解决方案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();
         }
    }
}

【讨论】：