У меня есть вариант использования, который я пытаюсь реализовать в 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'])?
