Доступ к встроенному компоненту <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. Это решение не работает для меня.

0 ответов

Другие вопросы по тегам