Как пользователю привязать идентификатор элемента от одного компонента к другому

Question

, прежде чем задавать вопрос, я нашел несколько похожих вопросов о переполнении стека о проблеме, с которой я столкнулся. Я пытаюсь передать идентификатор из одного шаблона в другой. мой первый шаблон выглядит следующим образом

<View
[id] = "'some_id'"
[Behavior] = "behavior"> </View>

во втором шаблоне у меня есть это.

<canvas id="id"></canvas>

для перемещения данных из одного компонента в другой я использую @input декораторы. работает отлично. внутри первого компонента я должен создать объект второго компонента. в обоих компонентах я использую ngOnInit методы, первый создает объекты, второй инициализирует их. проблема начинается здесь, при создании объекта у него еще нет идентификатора. его не определено.

      this.obj= MyObj.create(document.querySelector('#some_id'))

Я использовал @Input, AfterViewInit, OnChanges, *ngIf, чтобы заставить идентификатор как-то не быть нулевым или неопределенным. но безрассудно. Кто-нибудь может дать мне хороший совет, как перенести идентификатор из одного шаблона в другой?

Answer 1

Когда вы передаете строку с привязкой данных, это означает, что вы присваиваете постоянную строку some_id id внутри дочернего компонента.

[id] = "'some_id'"

Ниже вы связываете свойство класса родительского компонента some_id в id Свойство Input дочернего компонента.

[id]="some_id"

Answer 2

Когда вы говорите [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>