angular - 如何用户将元素 ID 从一个组件绑定到另一个组件
问题描述
在问这个问题之前,我发现很少有关于堆栈溢出的类似问题关于我面临的问题。我正在尝试将 ID 从一个模板传递到另一个模板。我的第一个模板看起来像这样
<View
[id] = "'some_id'"
[Behavior] = "behavior"> </View>
在我的第二个模板中,我有这个。
<canvas id="id"></canvas>
将数据从一个组件移动到另一个我正在使用@input
装饰器。工作正常。在第一个组件中,我必须创建第二个组件的对象。在我使用的两个组件中ngOnInit
,第一个创建对象,第二个初始化它们。问题从这里开始,在创建对象时它还没有 id。它未定义。
this.obj= MyObj.create(document.querySelector('#some_id'))
我用@Input
, AfterViewInit
, OnChanges
,*ngIf
以某种方式强制 id 不为空或未定义。但失败了。谁能给我一个很好的建议,如何将 id 从一个模板分配到另一个模板?
解决方案
当您说[id] = "'some_id'"
时,输入变量实际上是id
. 'some_id'
是该输入变量的值。
尝试以下
child.component.ts
@Input() id: string;
child.component.html
<canvas id="id"></canvas>
更新
可能像调用内置属性一样调用自定义输入变量正在做一些意想不到的事情。尝试使用其他名称
child.component.ts
@Input() customId: string;
child.component.html
<canvas id="customId"></canvas>
父组件.html
<app-child [customId]="'some_id'"...></app-child>
推荐阅读
- javascript - 如何在javascript函数中获取元素的属性?
- python - 使用 Pandas、groupby 并获取前 n 个值
- sql - SQL - 将字段与子查询相关联并使用 UPPER 时出错
- reactjs - setInterval 不在 React 功能组件中
- kotlin - 如何修复构建错误?
- html - 如何使用两个号召性用语设置警报样式
- swift - 默认 0 不是有效的连接 ID。swift和cocoa以编程方式出错
- c++ - Qt5 CMake 将所有库包含到可执行文件中
- reactjs - 反应部署不提供图像
- javascript - 使用 nextjs 和 next-i18next 在服务器端的非页面组件中获取当前语言