首页 > 解决方案 > 如何用户将元素 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 从一个模板分配到另一个模板?

标签: angular

解决方案


当您说[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>

推荐阅读