Блог

У меня есть два компонента, над которыми я работаю, bu-breadcrumbs и bu-menu .

В bu-breadcrumbs , у меня есть панировочные сухари, которые создаются как:

 @Component({
  selector: 'bu-breadcrumbs',
  template: `
    <nav class="breadcrumb"
    [ngClass]="{
      'is-centered': alignment === 'centered',
      'is-right': alignment === 'right',
      'has-arrow-separator': separator === 'arrow',
      'has-bullet-separator': separator === 'bullet',
      'has-dot-separator': separator === 'dot',
      'has-succeeds-separator': separator === 'succeeds',
      'is-small': size === 'small',
      'is-medium': size === 'medium',
      'is-large': size === 'large'
    }"
    [attr.aria-label]="ariaLabel">
      <ul>
        <li *ngFor="let breadcrumb of breadcrumbs; let idx = index"
          [ngClass]="{ 'is-active': idx === breadcrumbs.length - 1 }">
          <ng-container *ngTemplateOutlet="breadcrumb.templateRef"></ng-container>
        </li>
      </ul>
    </nav>
  `
})
export class BulmaBreadcrumbsComponent {
  @Input('label') ariaLabel = '';
  @Input('alignment') alignment = '';
  @Input('separator') separator = '';
  @Input('size') size = '';

  @ContentChildren(BulmaBreadcrumbComponent) breadcrumbs!: QueryList<BulmaBreadcrumbComponent>;

  constructor() {}
}

@Component({
  selector: 'bu-breadcrumb',
  template: `
    <ng-template>
      <ng-content></ng-content>
    </ng-template>
  `
})
export class BulmaBreadcrumbComponent implements AfterContentInit {
  @ViewChild(TemplateRef) templateRef!: TemplateRef<any>;

  constructor(private readonly cdr: ChangeDetectorRef) {}

  public ngAfterContentInit() {
    this.cdr.detectChanges();
  }
}
 

Это создает компонент так, как я ожидаю, что он должен:

Теперь я пытаюсь использовать ту же технику для реализации своего bu-menu компонента, но шаблон создается неправильно. В настоящее время код является:

 @Component({
  selector: 'bu-menu-list-item',
  template: `
    <ng-template>
      <ng-content></ng-content>
    </ng-template>
  `
})
export class BulmaMenuListItemComponent implements AfterContentInit {
  @ViewChild(TemplateRef) public templateRef!: TemplateRef<any>;

  constructor(private readonly cdr: ChangeDetectorRef) {
    console.log('constructed')
  }

  public ngAfterContentInit() {
    this.cdr.detectChanges();
  }
}

@Component({
  selector: 'bu-menu-list',
  template: `
    <ul class="menu-list">
      <li *ngFor="let menuItem of menuItems; let idx = index">
        <ng-container *ngTemplateOutlet="menuItem.templateRef"></ng-container>
      </li>
    </ul>
  `,
})
export class BulmaMenuListComponent {
  @ContentChildren(BulmaMenuListItemComponent) public menuItems!: QueryList<BulmaMenuListItemComponent>;

  constructor() {}
}
 

 <bu-menu>
  <bu-menu-label>General</bu-menu-label>
  <bu-menu-list>
    <a>Dashboard</a>
    <a>Customers</a>
  </bu-menu-list>
  <bu-menu-label>Administration</bu-menu-label>
  <bu-menu-list>
    <a>Team Settings</a>
    <a class="is-active">Manage Your Team</a>
    <ul>
      <li><a>Members</a></li>
      <li><a>Plugins</a></li>
      <li><a>Add a member</a></li>
    </ul>
    <a>Invitations</a>
    <a>Cloud Storage Environment Settings</a>
    <a>Authentication</a>
  </bu-menu-list>
  <bu-menu-label>Transactions</bu-menu-label>
  <bu-menu-list>
    <a>Payments</a>
    <a>Transfers</a>
    <a>Balance</a>
  </bu-menu-list>
</bu-menu>

 

My expectation is that the bu-menu should create a menu that looks like:

Но мой текущий код, похоже, неправильно загружает шаблон для повторения <li> элементов:

Я в тупике относительно того, где я ошибаюсь в реализации (я бы сказал) той же концепции для этого компонента.