Angular2 - использование дочернего компонента как значения атрибута

Question

Я хочу показать popover, когда пользователь нажимает на поле ввода, которое отлично работает, но я хочу, чтобы атрибут данных-содержимого этого popover должен был поступать из шаблона дочернего компонента , Вот пример:

parent.ts

import {Component,AfterViewInit} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {ChildComponent} from './child_test.ts'; 


@Component({ 
    selector: 'app', 
    template: `<input type='text' data-toggle="popover" data-trigger="focus" data-placement="bottom" [attr.data-content]="getPopoverContent()" />`, 
    providers: [ChildComponent] 
}) 
class AppComponent implements AfterViewInit{ 
    constructor(private _child: ChildComponent) {} 

    getPopoverContent(){ 
     return this._child; //returning empty object instead of child template 
    } 
    ngAfterViewInit(){ 
     $("input").popover(); 
    } 

} 

bootstrap(AppComponent); 

child.ts

import {Component} from 'angular2/core'; 

@Component({ 
    selector: "child-component", 
    template: "<div>Popover content from child.</div>" 
}) 
export class ChildComponent{}; 

Должен ли я использовать DynamicComponentLoader вместо инъекции зависимостей? если да, то как я могу это достичь?

Answer 1

Одна проблема заключается в том, что связывание с атрибутом stringifies значение

[attr.data-content] 

поэтому этот подход не будет работать.

Кажется, что Bootstrap popover ожидает строку, поэтому это было бы хорошо, но строгая угловой компонент, вы не укажете его HTML.

Answer 2

Вот обходной путь:

Назначить временную переменную для компонента, который вы хотите отобразить

<transaction-filter #popoverComponent></transaction-filter> 

Важно: Компонент выше должен разоблачить ElementRef в определении

constructor(public el: ElementRef) {} 

Создание элемента, который отображает popover

<button class="btn-sm btn-link text-muted" 
    data-animation="true" 
    data-placement="bottom" 
    title="Create Rule" 
    [popover]="popoverComponent"> 

    Create Rule... 
</button> 

Теперь сама директива поповера:

/// <reference path="../../typings/tsd.d.ts"/> 

import 'bootstrap' 

import { Directive, ElementRef, Input} from 'angular2/core' 

declare var $: JQueryStatic; 

@Directive({ 
    selector: '[popover]', 
}) 
export class PopoverDirective { 
    @Input('popover') _component: any 
    _popover: JQuery 

    constructor(private _el: ElementRef) { } 

    ngOnInit() { 
     // Hide the component 
     this._component.el.nativeElement.style.display = "none" 

     // Attach it to the content option 
     this._popover = $(this._el.nativeElement) 
      .popover({ 
      html: true, 
      content: this._component.el.nativeElement 
     }) 

     // When the below event fires, the component will be made visible and will remain 
     this._popover.on('shown.bs.popover',() => { 
      this._component.el.nativeElement.style.display = "block" 
     }) 
    } 
}