Разделение углового кода на разные компоненты
У меня есть два поля ввода на моей странице. один - тип электронной почты, а другой - поле ввода с текстом.
все работает нормально. Теперь я хочу разделить компонент на два . например. теперь у меня есть компонент «базовая информация». я хочу, чтобы компонент «текст» находился внутри компонента базовой информации, и переместил в него текстовый код. input.html
<app-text *ngIf = "info.type === 'text'"></app-text>
<input *ngIf = "info.type === 'email'" type = "text" [formControlName] = "controlName" />
input.ts
public info: InputInterface;
текст.html
<input *ngIf = "info.type === 'text'" type = "text" [formControlName] = "controlName" />
текст.ts
public info: InputInterface;
ошибка, которую я получаю, связана с типом autocomplete.ts, который не определен. Я думаю, мне нужно передать свойство от родительского компонента (ввод) к дочернему компоненту (текст). Я новичок в angular и не могу понять это. Я попробовал директиву @Input, но все равно ошибка та же.
Ответы 1
Если вы объявляете ввод в дочернем компоненте, вам необходимо передать ему значение через родительский файл HTML. Поскольку вы не передаете информацию в parent.html, вы получаете эту ошибку. Вот правильный путь:
текст.ts
@Input() public info: InfoInterface;текст.html
<input *ngIf = "info.type === 'text'" type = "text"/>parent.html (Обратите внимание, что *ngIf здесь не обязателен. Он присутствовал в вашем коде, поэтому я добавил его сюда, предполагая, что это ваше требование)
<app-text [info] = "parentInfoToBePassed" *ngIf = "parentInfoToBePassed.type === 'text'"></app-text>родитель.ts
public parentInfoToBePassed: InfoInterface = {type: 'text'};https://stackblitz.com/edit/angular-input-example Это простой пример того, как разделить код и использовать входные данные.
Надеюсь это поможет. Дайте мне знать, если что-то не ясно
Так как я не знал точной структуры InfoInterface, я написал только тип: 'текст', но вы можете добавить и все остальные поля. Весь этот объект будет передан в информацию в text.ts. Итак, в text.html у вас будет доступ к info.label, info.defaultValue и т. д.
я не могу использовать это родительский .public информация: InputInterface; а затем в parent.html [info] = "info"
Что вы можете! Вы не получите никаких конфликтов, так как они находятся в разных файлах. Я просто так написал, чтобы было понятно.
что делать, если в интерфейсе более одного данных. как тип, метка, значение по умолчанию и значения являются динамическими