Question

我想实现像Ryanair的结帐www.ryanair.com/es/es/booking/extras (but first you have to select a flight)之类的网页，当您点击按钮时，路线会更改for example to .../extras/bags并打开包含行李选项的sidenav，而不会更改主要内容页。

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

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

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

Answer 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();
         }
    }
}

有角度的mat-sidenav与路线

1 个答案: