用户如何将元素ID从一个组件绑定到另一个组件

Question

在问这个问题之前，我在堆栈溢出中发现了一些关于我面临的问题的类似问题。我正在尝试将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设为非null或未定义。但失败了谁能给我一个很好的建议，如何将ID从一个模板复制到另一个模板？

Answer 1

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

parent.component.html

<app-child [customId]="'some_id'"...></app-child>

Answer 2

传递带有数据绑定的字符串时，这意味着您正在将常量字符串some_id分配给子组件中的id。

[id] = "'some_id'"

在下面，您将父组件类属性some_id绑定到子组件的id Input属性。

[id]="some_id"