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 - 使用子组件作为属性的值

回答

相关问题