Доступ к встроенному компоненту <ng-container>
У меня есть компонент формы milestone, использующий его следующим образом:
use-form.component.html
<milestone-form>
<milestone>
<ng-template>
<my-component></my-component>
</ng-template>
</milestone>
<milestone>
<ng-template>
<my-component2></my-component2>
</ng-template>
</milestone>
</milestone-form>
я использую <ng-template>
с целью инициализации <my-component>
когда мне это нужно.
Вот <milestone>
составная часть:
milestone.component.ts
:
@Component({
selector: 'milestone',
templateUrl: './milestone.component.html',
styleUrls: ['./milestone.component.css']
})
export class MilestoneComponent {
@ContentChild(TemplateRef) template: TemplateRef<Milestone>;
available:boolean;
visible:boolean;
}
milestone.component.html
:
<div *ngIf="available" [hidden]="!visible">
<ng-container [ngTemplateOutlet]="template">
</ng-container>
</div>
<my-component>
расширяет класс Milestone, у которого есть некоторые функциональные возможности, которые мне нужны.
my-component.component.ts
:
@Component({
selector: 'my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css'],
providers: [{provide: Milestone, useExisting: forwardRef(() => MyComponentComponent)}]
})
export class MyComponentComponent extends Milestone{
}
Все работает, но я не могу получить доступ к MyComponent из MilestoneComponent. Я старался @ContentChild(Milestone)
а также <ng-content>
но затем не может управлять инициализацией MyComponent для проекции шаблона. Есть ли способ получить доступ к MyComponent/Milestone в <ng-container>
?
Спасибо за любую помощь!
PS. Это решение не работает для меня.