Блог

Главная - Вопросы по программированию - Как получить доступ к компоненту, встроенному в ng-template?

Как получить доступ к компоненту, встроенному в ng-template?

#angular

#angular

Вопрос:

У меня есть компонент контейнера, который принимает TemplateRef, и в этом компоненте контейнера я хочу получить доступ к компоненту (предопределенному), который встроен в шаблон. Здесь я не мог использовать ContentChild, поскольку он не поступает через content .

 //Container Component
@Component({
 selector: 'app-cnt',
 template: `<div>
    content goes here({{name}}):-
    <ng-container [ngTemplateOutlet]="template"></ng-container>
    </div>`,
 styles: [`h1 { font-family: Lato; }`]
})
export class ContainerComponent  {
 @Input() name: string;
 @Input() template: TemplateRef<any>;
 //In this component i need to access Test component which comes in template 
}


//Container component usage
<app-cnt [template]="templ" name="{{ name }}"></app-cnt>
<ng-template #templ>
   <span style="color: green">Embed Test comonent</span>
   <app-test class="app-test"></app-test>
</ng-template>

Вот код stackblitz

Комментарии:

1. это может быть реализовано путем передачи ngTemplateOutletContext, содержащего this , а затем «зарегистрировать» себя внутри родительского элемента или передать обратный вызов «register» от родительского элемента. Это будет работать, но выглядит совсем не красиво. Разве невозможно передать эти шаблоны как ng-content? если да, проблема становится тривиальной

2. Спасибо, @Andrey. Да, это решение не выглядит чистым, но выполняет свою работу. С возможностью повторного использования ng-контента возникает проблема, или пользователь должен реализовать компонент вместо передачи простого шаблона.

3. почему? можно использовать контент, подобный <parent><span>sometext</span><child>childContent...</child></parent> . мне кажется, что со многими элементами в контенте все будет в порядке, если ваш случай будет реализован с помощью ng-content