如何确保角度组件的所有子元素都是特定类型？

Question

我有这个用例我试图在Angular中实现 - 一个标题组件，可以放在一个有小图标按钮容器的页面上。像这样：

标题的每个实例都可以在其中包含不同的图标按钮。它必须只包含这些类型的按钮，除非包含在标题中，否则按钮不能存在。基本上这个：

<my-header title="Heading Text">
  <my-header-button icon-class="save" (clicked)="doSave()"></my-header-button>
  <my-header-button icon-class="mail" (clicked)="doMail()"></my-header-button>
  <my-header-button icon-class="flag" (clicked)="doFlag()"></my-header-button>
</my-header>

父组件的设计如下：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-header',
  template: `
      <header>
        <h1>{{title}}</h1>
        <div><ng-content></ng-content></div>
      </header>
    `
})

export class HeaderComponent {
  @Input() title = '';
}

子组件的实现方式如下：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { HeaderComponent } from './header.component';

@Component({
    selector: 'my-header-button',
    template: `
      <a (click)="onClick($event)"><i class="{{icon-class}}"</a>
    `,
})

export class HeaderButtonComponent {
    constructor(parent: HeaderComponent) { }
    @Input() public iconClass: string = '';
    @Output() public clicked: EventEmitter<any> = new EventEmitter();

    private onClick(button): void {
        this.clicked.emit(button);
    }
}

我能够通过引用构造函数中的父类型（my-header-button来确保constructor(parent: HeaderComponent) { }不能在父项之外使用。我的两个问题：

如何确保my-header元素的所有子元素仅为my-header-button个元素？

此外，如何确保每个my-header-button都可以使用路由器链接（[routerLink]="['/some-link']）？

Answer 1

对于第一个问题，尝试@ViewChild可能是一个解决方案

试试TreeSet<Integer> set = new TreeSet<>(Arrays.stream(numbers).boxed().collect(Collectors.toList())); https://alligator.io/angular/viewchild-access-component/

对于第二个问题，分配一些唯一的东西，例如id到标题按钮并给出路径 @ViewChild(HeaderButtonComponent) appButton: HeaderButtonComponent;

进一步使用params和ActivatedRoute模块从url获取id。有关详细信息，请查看文档 https://angular.io/guide/router