Динамическая вставка кнопок в angular 13

Question

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

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

      dados: IHeaderTitlePage = {
    title: 'Caption List'
    botoes: [
      {
        name: 'Parametrizações',
        icon: 'configuracao_outline',
        iconPosition: 'left',
        router: '../parametrizacao'
      },
      {
        name: 'Empresas',
        icon: 'empresas_outline',
        iconPosition: 'left',
        router: '/'
      },
      {
        name: 'adicionar',
        icon: 'adicionar',
        iconPosition: 'left',
        router: '../cadTecnico'
      }
    ]
  };

       <app-header-title-page *ngFor="let dado of dados"  [dados]="dado"  [titulo]="titulo"></app-header-title-page>

Другой момент заключается в том, что при попытке использовать [routerlink]="[имя переменной]", которая идет вместе с маршрутом, это не работает, выдает ошибку.

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

Это шапка страницы, которую я буду использовать на всех, чтобы не повторяться, потому что на одной странице я не передаю кнопки, на другой могу передать одну или две.

И данные всегда будут отправлены родителю, а не от банка.

В дочернем компоненте выглядит так:

      <section class="row flex-container">

  <article class="col-6">
    <div class="menu">
      <h3 class="voxel-text-insight-bold voxel-color-text-heading-2" id="titulo">{{titulo}}</h3>
    </div>
  </article>


  <article class="col-6">
    <div class="butttons_config">
      <button  iconPosition="data.iconPosition" [routerLink]="[data.rota]">
        <icon>{{data.icon}}</icon>{{data.nome}}
      </button>
    </div>
  </article>


</section>

И, как я уже сказал, при этом генерируется столько строк, сколько поступает от кнопок.

Я попытался передать данные дочернему компоненту, не выполняя действия, как показано ниже:

      <app-header-title-page   [dados]="dados" ></app-header-title-page>

И внутри самого дочернего компонента выполните for так, как я пробовал ниже:

      <section class="row flex-container">
  <article class="voxel-col-6">
    <div class="menu">
      <h3 class="voxel-text-insight-bold voxel-color-text-heading-2" id="titulo">{{dados.nome}}</h3>
    </div>
  </article>

  <article class="col-6">
    <div class="butttons_config" *ngFor="let butons of dados">
      <button iconPosition="butons.botoes.iconPosition" [routerLink]="['butons.botoes.rota']">
        <icon>{{butons.botoes.icon}}</icon>{{butons.botoes.nome}}
      </button>
    </div>
  </article>

</section>

      <section class="row flex-container">
  <article class="voxel-col-6">
    <div class="menu">
      <h3 class="voxel-text-insight-bold voxel-color-text-heading-2" id="titulo">{{dados.nome}}</h3>
    </div>
  </article>

  <article class="col-6"  *ngFor="let butons of dados">
    <div class="butttons_config">
      <button iconPosition="butons.botoes.iconPosition" [routerLink]="['butons.botoes.rota']">
        <icon>{{butons.botoes.icon}}</icon>{{butons.botoes.nome}}
      </button>
    </div>
  </article>

</section>

      <section class="row flex-container">
  <article class="voxel-col-6">
    <div class="menu">
      <h3 class="voxel-text-insight-bold voxel-color-text-heading-2" id="titulo">{{dados.nome}}</h3>
    </div>
  </article>

  <article class="col-6" >
    <div class="butttons_config">
      <button  *ngFor="let butons of dados"  iconPosition="butons.botoes.iconPosition" [routerLink]="['butons.botoes.rota']">
        <icon>{{butons.botoes.icon}}</icon>{{butons.botoes.nome}}
      </button>
    </div>
  </article>

</section>

ни на экране, ни на консоли ошибку не показывает, однако на экране ничего не отображает, все белое.

В заключение, этот дочерний компонент будет только заголовком страницы, содержащим заголовок страницы и кнопки, если у него есть, например, кнопка регистрации.

Мой CSS, я использую flexbox, где я помещаю заголовок слева и кнопки справа в одну линию.

Answer 1

Исправьте свой роутерСсылка на это

      routerLink="{{butons.botoes.rota}}"

или

      [routerLink]="butons.botoes.rota"