Угловой мат-сиденав с трассой

Question

Я хочу реализовать страницу, как оформить заказ Ryanair www.ryanair.com/es/es/booking/extras (but first you have to select a flight), что когда вы нажимаете кнопку, маршрут меняется for example to .../extras/bags и открывает сиденав с опциями сумок, не меняя главной страницы.

Также, если вы добавите /bags к маршруту вручную, 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, то "сумки" - это значение, переданное в параметр 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();
         }
    }
}