Angular - оператор if для проверки текущего маршрута - PullRequest
Новая
       28

Angular - оператор if для проверки текущего маршрута

0 голосов
/ 20 октября 2019

У меня есть модальный компонент. Я хочу проверить, пришел ли пользователь из формы '/tabs/tab1' или '/tabs/tab2', чтобы отобразить данные, специфичные для данных, в зависимости от текущей формы URL-адреса. Проблема состоит в том, что данные отображают оба из них в модальном компоненте html, они не прослушиваются, если оператор ниже.

код: 

    page1:boolean= false
   page2:boolean= false

  constructor(private router:Router) { 


     if (this.router.url === '/tabs/tab1') {
            this.page1= true
            this.page2= false
            this.getData()

        } else if (this.router.url === '/tabs/tab2'){
          this.page1= false 
          this.page2= true

          this.getData()

        }
}

html 

  <ng-container *ngIf="page1; else page1">
   // check if page 1 route /tabs/tab1' display data page1 and hide data 
      page 2
  // for page 1 different data   
  </ng-container>
  <ng-template #page1>

  </ng-template>

  <ng-container *ngIf="page2; else page2">
   // check if page2 route /tabs/tab2' display data page 2 and hide 
       data page 1

    // Also of paga 2 different data 
  </ng-container>
  <ng-template #page2>

  </ng-template>

Ответы [ 2 ]

1 голос
/ 20 октября 2019

Ваши условия не работают так, как вы хотите

Попробуйте это условие ниже 

<ng-container *ngIf="page1 && !page2">
  // Your data to show here    
 </ng-container>


<ng-container *ngIf="page2 && !page1">
  // Your data to show here 
</ng-container>

Таким образом, если page1 имеет значение false, а page2 имеет значение true, только страница 2 будет отображаться, а еслиpage1 - true, а page2 - galse, тогда он будет отображать этот контейнер page1

. Если вы хотите, чтобы страницы 1 и 2 отображались одновременно, вы можете вручную установить значение true и false, и только если значение true page1, отобразите его иесли true page2, отобразите это следующим образом 

<ng-container *ngIf="page1">
  // Your data to show here    
 </ng-container>


<ng-container *ngIf="page2">
  // Your data to show here 
</ng-container>
0 голосов
/ 20 октября 2019

Проблема в том, что у вас есть две переменные шаблона #page1, #page2 и две переменные компонента page1, page2 с одинаковыми именами page1 и page2. Поэтому, когда вы говорите *ngIf="page1; else page1" и *ngIf="page2; else page2", эти if обращаются к переменным вашего шаблона на #page1 и #page2, которые являются объектами, следовательно, являются значениями true и всегда оцениваются как true. Вы должны переименовать ваши переменные шаблона или переменные компонента, чтобы использовать правильные. Одним из решений может быть изменение вашего шаблона, например: 

<ng-container *ngIf="page1; else page1ref">
   // check if page 1 route /tabs/tab1' display data page1 and hide data 
      page 2
  // for page 1 different data   
  </ng-container>
  <ng-template #page1ref>

  </ng-template>

  <ng-container *ngIf="page2; else page2ref">
   // check if page2 route /tabs/tab2' display data page 2 and hide 
       data page 1

    // Also of paga 2 different data 
  </ng-container>
  <ng-template #page2ref>

  </ng-template>
...