Почему использование многих розеток маршрутизатора вызывает ошибку? - PullRequest
Новая
       10

Почему использование многих розеток маршрутизатора вызывает ошибку?

0 голосов
/ 12 октября 2018

Я создаю приложение, в котором домашняя страница не имеет ту же структуру HTML, что и другие страницы.Я также использую mdbangular в качестве основы пользовательского интерфейса.Чтобы переключить шаблон с домашней страницы на другие страницы, я сделал следующее поведение маршрутизации (я резюмировал): 

{ path: 'home', component: HomeComponent, data: { homePage: true } },
{ path: 'event-details', component: EventDetailsComponent },
{ path: 'login', component: LoginComponent, data: { fullPage: true } },

Взгляните на параметр данных.В файле макета я переключаюсь между html следующим образом: 

<ng-container *ngIf="homePage === true">
    <router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>     
</ng-container>

    <ng-container *ngIf="homePage === false && fullPage == false">
        <!-- JUST A SAMPLE IMAGINE EXTRA HTML-->
        <router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
    </ng-container>

Когда я перемещаюсь между домашней страницей на любые другие страницы, я получаю сообщение об ошибке, КОТОРОЕ ИЗБЕГАЕТСЯ, ЕСЛИ Я ИСПОЛЬЗУЮ ТОЛЬКО ОДИН ROUTER-OUTLET INSTEADOF TWO.

Мой вопрос: почему я получаю ошибку, когда использую два маршрутизатора-выхода вместо одного?Есть ли правило или что-то с Angular6 +, которое я должен делать, когда я переключаюсь между роутером-розеткой таким образом?Как уничтожить или отсоединить предыдущую розетку маршрутизатора перед следующей?

Вот как я получаю параметр данных: 

ngOnInit() {
    this.activatedRoute.url.subscribe(() => {
        const routeParams = this.activatedRoute.snapshot.firstChild.data;

        if (routeParams.homePage === undefined || routeParams.homePage === null) {
          this.homePage = false;
        } else {
          this.homePage = routeParams.homePage;
        }

        if (routeParams.fullPage === undefined || routeParams.fullPage === null) {
          this.fullPage = false;
        } else {
          this.fullPage = routeParams.fullPage;
        }
    });

Вот объяснение ошибки с помощью mdbcarousel .Но это не ограничивается каруселью.Вот почему я сомневаюсь, что это больше англоязычная вещь, и именно поэтому я задаю вопрос здесь.

Спасибо за любое руководство,

Дэвид

1 Ответ

0 голосов
/ 12 октября 2018

router-outlet отображает текущий дочерний элемент.Например, 

{ 
   path: 'event-details', 
   component: EventDetailsComponent,
   children: [
       { path: 'home', component: HomeComponent }
       { path: 'login', component: LoginComponent }
   ],
},

Таким образом, в зависимости от того, является ли ваш URL event-details/login или event-details/home, EventDetailsComponent s router-outlet будет отображать запрашиваемый компонент.Если вы хотите иметь разные шаблоны, вы должны создавать разные маршруты.

Я считаю, что *ngIf не работает, потому что угловая проверка маршрутов, прежде чем он проверяет изменения DOM.Имеет смысл, поскольку перед рендерингом страницы он должен направляться к маршруту.

В любом случае 100% не следует использовать два выхода-маршрутизатора в одном и том же компоненте, а переосмыслить свой подход,data не следует использовать для *ngIf router-outlet!

...