Angular2 - 使用子組件作爲屬性的值

我想顯示一個彈出窗口，因爲用戶單擊輸入框時工作正常，但我希望該彈窗的數據內容屬性來自子組件的模板。這裏有一個例子：Angular2 - 使用子組件作爲屬性的值

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，而不是依賴注入？如果是這樣，那我該如何實現呢？

來源

2016-02-28 essaji

爲什麼你在供應商的組件？它應該在指令上，你應該查詢它，而不是像那樣注入它。 –

-1

一個問題是，結合屬性stringifies值

[attr.data-content]

因此，這種方法是行不通的。

看來Bootstrap popover需要一個字符串，因此這樣做可以，但是將Angular組件串起來不會給它的HTML。

來源

2016-02-28 14:04:08

所以你是說沒有辦法將屬性的值綁定到某個子模板上？ – essaji

您需要將組件添加到DOM，然後在'ngAfterViewInit（）'中讀取它的內部/外部HTML。這似乎不是一個合適的解決方案。 –

它爲什麼需要成爲一個組件。如果您首先將HTML作爲字符串傳遞，那麼它可以開箱即用。 –

這裏有一個解決方法：

分配一個臨時變量要顯示的組件

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

重要信息：組件的上方必須在其定義露出ElementRef

constructor(public el: ElementRef) {}

創建將顯示彈出框的元素

<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" 
     }) 
    } 
}

來源

2016-03-03 19:42:23

Angular2 - 使用子組件作爲屬性的值

回答

相關問題