Angular 2 动态双向绑定

2024-03-09

我正在尝试构建一个动态附加另一个组件的组件。作为一个例子,这是我的父类:

import { Component, ComponentRef, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';

@Component({
    templateUrl: './app/sample-component.component.html',
    selector: 'sample-component'
})
export class SampleComponent {

    @ViewChild('dynamicContent', { read: ViewContainerRef })
    protected dynamicComponentTarget: ViewContainerRef;
    private currentComponent: ComponentRef<any>;
    private selectedValue: any;

    constructor(private componentResolver: ComponentFactoryResolver) {

    }

    private appendComponent(componentType: any) {
        var factory = this.componentResolver.resolveComponentFactory(componentType);
        this.currentComponent = this.dynamicComponentTarget.createComponent(factory);
    }
}

sample-component.component.html:

<div #dynamicContent></div>

它可以很好地附加一个元素,但我不知道如何动态绑定双向,就像我在静态组件中所做的那样:[(ngModel)]="selectedValue"


不支持与动态添加的组件绑定。

您可以使用共享服务与动态添加的组件进行通信(https://angular.io/docs/ts/latest/cookbook/component-communication.html https://angular.io/docs/ts/latest/cookbook/component-communication.html)
或者您可以使用命令式读取/设置this.currentComponent参考:

private appendComponent(componentType: any) {
    var factory = this.componentResolver.resolveComponentFactory(componentType);
    this.currentComponent = this.dynamicComponentTarget.createComponent(factory);
    this.currentComponent.instance.value = this.selectedValue;
    this.currentComponent.instance.valueChange.subscribe(val => this.selectedValue = val);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 2 动态双向绑定 的相关文章

随机推荐

  • Android Studio 键盘快捷键控制

    谁能给我一些 Android Studio 键盘快捷键所有控件的建议或链接 Move to File gt Settings gt Keymap并改变Keymaps设置到eclipse 这样就可以像在eclipse中一样使用快捷键了
  • Mathematica“AppendTo”函数问题

    我是 Mathematica 的新手 在向数据表添加列时遇到了重大故障 我在 Vista 中运行 Mathematica 7 我在RFD上花了很多时间才来这里问 我有一个包含三列五行的数据表 mydata 我正在尝试将两个包含五个元素的列表
  • 数组切片返回 [object Object] 而不是值

    我试图获取特定 div 被删除时的位置 在一些帮助下 我整理了下面的代码 我在最后一点添加了尝试获取特定值 但它只是返回 object Object 而不是 0 0 或 0 120 之类的东西 那么问题是如何从数组中获取实际值 Here h
  • Chart.js 时间序列跳过几天

    我有一个非常简单的条形图 其中每个数据点由日期 天 和数字组成 也许唯一的特点是并非涵盖每个日期 即有些日子没有数据点 绘制图表时 仅显示那些具有与其关联的数据点的日期 所有其他日期都被简单地省略 因此 x 轴分布不均匀并且会跳过值 如何确
  • 为什么用于 XML 文件分析的 PowerShell 工作流明显慢于非工作流脚本

    我正在编写一个 PowerShell 程序来分析 1900 多个大型 XML 配置文件 50000 多行 1 5Mb 的内容 为了进行测试 我将 36 个测试文件移动到我的 PC Win 10 PS 5 1 32GB RAM 并编写快速脚本
  • Microsoft(SQL)服务器许可[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我们正在规划一个浏览器应用程序 xbap 它将与 WCF 服务进行交互 这些 WCF 服务从 SQL 数据库获取信息 我们的每个客户在此服
  • 在 Visual Studio 中调试 x64 Azure Functions

    我正在通过 Visual Studio 编写 C Azure 函数 该函数通过博客存储触发 并且使用 x64 C DLL 处理 blob 问题是随 Visual Studio 安装的默认 Azure 函数工具仅具有 x86 版本的函数 ex
  • Fluent NHibernate join 不使用主键

    我试图从连接表中获取单个属性 其中主表中的非 PK 连接到外部表的 PK 下面是一个过于简单化我想要完成的事情的例子 我不想提及外国实体 Tables CREATE TABLE Status Id int Body text Categor
  • 我们可以将TFS 2015直接迁移到Azure DevOps吗?

    我计划转向 Azure DevOps 目前我们内部有 TFS2015 根据这篇文章 我们必须先迁移到 TFS 2018 然后才能迁移到 Azure DevOps 我们不能从 TFS 2015 迁移到 Azure DevOps 吗 根据本文
  • 依赖注入和命名记录器

    我有兴趣了解更多有关人们如何使用依赖注入平台注入日志记录的信息 尽管下面的链接和我的示例引用了 log4net 和 Unity 但我不一定会使用其中任何一个 对于依赖注入 IOC 我可能会使用 MEF 因为这是项目 大型 其余部分所采用的标
  • ValueError:无效端点:https://s3..amazonaws.com

    当 EMR 机器尝试运行包含 boto3 初始化的步骤时 有时会出现以下错误 ValueError Invalid endpoint https s3 amazonaws com当我尝试设置一台新机器时 它突然可以工作了 附上完整错误 se
  • 不兼容的库版本:imagick.so 需要版本 18.0.0 或更高版本,但 libfreetype.6.dylib 在第 0 行的 Unknown 中提供版本 16.0.0

    我成功安装了 imagemagic 和 imagick 使用http www php net manual en imagick installation php 94169 http www php net manual en imagi
  • to_json 在 Rails 中返回字符串而不是 json

    下面的代码应该返回一个 json series series map do serie name gt serie name id gt serie id series to json 其返回结果如下 name Barra id 3 nam
  • 什么是可以检测手写的好的 OCR? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我需要一个库 可以在扫描手写纸后从其中提取文本 正常拉丁文本 它可以是一个免费的解决方案 甚至是我必须付费的解决方案 只要它可以处理大写字
  • READ_PRIVILEGED_PHONE_STATE 权限错误

    我创建了一个应用程序来监控呼叫 传入和传出 并且在电话响铃期间 它会显示有关号码的详细信息 来电一切正常 但是当用户拨打电话时 应用程序崩溃并出现以下错误 05 14 23 14 36 376 1427 1475 W BroadcastQu
  • F#:检测正则表达式模式中的错误

    我是编程新手 F 是我的第一个 NET 语言 作为初学者的项目 我想编写一个应用程序 要求用户输入正则表达式模式 然后标记任何错误 我已经浏览了 MSDN 上的 Regex API 但似乎没有任何方法可以自动检测正则表达式模式中的任何错误
  • 如何进行这种图像转换?

    我有一个带有模糊边缘的彩色斑点的图像 上半部分 我想为其创建一个由直线组成的轮廓 下半部分 填充形状没有问题 只需添加轮廓即可 如有必要 可以将其转换为黑白图像 谁能指出一个可以做到这一点的简单转换 程序 最好是我可以轻松找到代码示例的东西
  • 如何获取与正则表达式匹配的片段的行号?

    如何才能获得行号匹配给定的所有文本片段regexp 在一个文件内 file content f read m re compile regexp How to extract line numbers of the matched text
  • 如何使用 Django 和 UTF-8 内容类型作为模板?

    当我做 return render to response 在姜戈 如何将内容类型设置为 UTF 8 那么显示的所有内容都是 UTF 8 吗 django 使用 UTF 8 作为默认编码 但这可以通过 settings DEFAULT CH
  • Angular 2 动态双向绑定

    我正在尝试构建一个动态附加另一个组件的组件 作为一个例子 这是我的父类 import Component ComponentRef ViewChild ViewContainerRef ComponentFactoryResolver fr