Angular2 - 使用子组件作为属性的值

Angular2 - using child component as value of an attribute

本文关键字：属性 组件 Angular2      更新时间：2023-09-26

我想在用户单击输入字段时显示一个弹出窗口，该字段工作正常，但我希望该弹出框的数据内容属性来自子组件的模板。下面是一个示例：

父.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);

儿童网

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

我应该使用 DynamicComponentLoader 而不是依赖注入吗？ 如果是这样，那么我该如何实现呢？

这是一个解决方法：

将临时变量分配给要显示的组件

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

一个问题是绑定到属性会使值字符串化

 [attr.data-content]

因此，这种方法行不通。

似乎 Bootstrap 弹出框需要一个字符串，因此这很好，但是字符串化 Angular 组件不会给你它的 HTML。

相关文章：