angular7 строит компонент navroute, но не знаю, что делать сейчас

Question

нет проблем с этим кодом

, если быть более точным

могу ли я создавать значения в своем угловом HTML или нет?

Я ничего не мог найти по этому поводу, поэтому я думаю, что нет, и что мне теперь делать, если я хочу создать автоматизированное меню.Я использую угловые материалы в этом

Мне нужно создать панель навигации, но я создал ее в угловом HTML с некоторыми вещами в TS, чтобы создавать данные, которые должны быть автоматически

, поэтому мне нужнозациклить эту нижнюю часть моего кода с любым значением, но я не знаю, как начать

        <!-- need to loop this block of code whenever there is any new item with children -->
                    <div *ngFor="let childss of childs.children">
                      <div *ngIf="childss.children != null">
                        
                      </div>
                      <a routerLink="/{{navRoute.path}}/{{childs.path}}/{{childss.path}}"><button mat-menu-item>{{childss.path}}</button></a>
                    </div>
        
                  </mat-menu>
              </div>
              <ng-template #elsesBlock>
                <a routerLink="/{{navRoute.path}}/{{childs.path}}"><button mat-menu-item>{{childs.path}}</button></a>
              </ng-template>
              <!-- till here but have no idee how to do this effectively -->

childs - это элемент массива

, но для правильной работы цикла нужны пользовательские входные данные, но я понятия не имею, как это сделать, если

  
  <div class="nav_items" *ngFor="let navRoute of navRoutes">
      <div *ngIf="navRoute.children != null; else elseBlock">
        
        <div *ngIf="navRoute.children != null">
          <a routerLink="/{{navRoute.path}}">
            <button mat-button [matMenuTriggerFor]="menu">{{navRoute.path}}</button>
          </a>

          <mat-menu #menu="matMenu"> 

            <div *ngFor="let childs of navRoute.children">
              
              <div *ngIf="childs.children != null; else elsesBlock">
                  <a routerLink="/{{navRoute.path}}/{{childs.path}}">
                    <button mat-menu-item [matMenuTriggerFor]="child">{{childs.path}}</button>
                  </a>
        
                  <mat-menu #child="matMenu"> 
        <!-- need to loop this blok of code when ever there is anny new item with children -->
                    <div *ngFor="let childss of childs.children">
                      <div *ngIf="childss.children != null">
                        
                      </div>
                      <a routerLink="/{{navRoute.path}}/{{childs.path}}/{{childss.path}}"><button mat-menu-item>{{childss.path}}</button></a>
                    </div>
        
                  </mat-menu>
              </div>
              <ng-template #elsesBlock>
                <a routerLink="/{{navRoute.path}}/{{childs.path}}"><button mat-menu-item>{{childs.path}}</button></a>
              </ng-template>
              <!-- till here but have no idee how to do this effectively -->
            </div>

          </mat-menu>        
        </div>
        
      </div>
        
      <ng-template #elseBlock>
        
        <a routerLink="/{{navRoute.path}}">
          <button mat-button>{{navRoute.path}}</button>
        </a>

      </ng-template>

 </div>

это весь мой HTML

nav route - это массив из моих маршрутов

Я пробовал ссылку HTML, но это не работаетс угловыми элементами

Answer 1

Попробуйте этот синтаксис для вашего routerLink:

[routerLink]="['/' + navRoute.path + '/' + childs.path]"