Так что я застрял на этом. Я пытаюсь заставить родительский компонент общаться или взаимодействовать с дочерним компонентом. Вот родительский компонент, который в основном имеет цикл for, используемый для итерации или генерирования большего количества ссылок, если пользователь хочет добавить больше или нажимает кнопку, чтобы добавить больше.
<div class="section url-wrapper">
<div *ngFor="let url of urls; let i = index;" class="link input-wrapper">
<childComponent></childComponent>
<button class="button bad icon-only" (click)="removeURL(i)">
<i class="far fa-times"></i>
</button>
</div>
</div>
Родительский компонент должен иметь возможность только регистрировать и отображать выходные данные дочернего компонента.
Это пример дочернего компонента
<div class="section url-wrap">
<input aria-label="URL Title" placeholder="Title" type="text" [value]="urls[i].title" (ngModel)="urls[i].title" name="url.title.{{ i }}"
(input)="updateTitle(i, $event.target.value)">
<input aria-label="URL" placeholder="https://example.com" type="text" [value]="urls[i].url" (ngModel)="urls[i].url" name="url.url.{{ i }}"
(input)="updateUrl(i, $event.target.value)">
</div>
Мне нужна помощь как для разрешения родительскому компоненту регистрировать входные данные дочернего компонента, так и для возможности итерации из цикла for родительского компонента, если это возможно.
Пожалуйста, дайте мне знать, если вам нужна дополнительная информация, такая как файлы компонентов или разъяснения
Приведенный ниже код и пример продемонстрируют, как данные @Input()
из parent → child → parent с использованием @Input()
и @Output()
.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
template: '
<div class="section url-wrapper">
<div *ngFor="let url of urls" class="link input-wrapper">
<app-child [url]="url" (updateUrl)="onUrlUpdate($event)"></app-child>
</div>
</div>
'
})
export class ParentComponent implements OnInit {
public urls = [
{url: "https://example.com", title: "Example1"},
{url: "https://example.com", title: "Example2"},
{url: "https://example.com", title: "Example3"},
]
constructor() { }
ngOnInit() {
}
onUrlUpdate($event) {
// completely overkill, but just used to demonstrate a point
var url = this.urls.find(_url => {
// we can see here that the $event.url is actually the same object as the urls[i] that was
// passed to the child. We do not lose the reference when it is passed to the child or back
// up to the parent.
return $event.url === _url
});
if (url) {
url[$event.prop] = $event.newValue;
}
console.log('Updated URL "${$event.prop}" property with the value "${$event.newValue}"');
}
}
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: '
<div class="section url-wrap">
<input aria-label="URL Title" placeholder="Title" type="text" [value]="url.title"
(input)="handleUrlUpdate($event, 'title')"/>
<input aria-label="URL" placeholder="https://example.com" type="text" [value]="url.url"
(input)="handleUrlUpdate($event, 'url')"/>
</div>
',
})
export class ChildComponent implements OnInit {
@Input() url; // passed in from parent via [url] property on <app-child>
@Output() updateUrl = new EventEmitter();
constructor() { }
ngOnInit() {
// this.url is now available for the life of the child component (assuming it was passed by the parent)
}
handleUrlUpdate($event, propToUpdate) {
// overkill, but used to demonstrate a point
this.updateUrl.emit({url: this.url, prop: propToUpdate, newValue: $event.target.value});
}
}
Самый простой способ дать компонентам запятнать друг друга - это ввод-вывод:
Вы можете передать значения от родителя к потомкам с помощью @Input, например:
Родительский код:
<childComponent [someInputValue]="hello"></childComponent>
Детский код:
@Input() someInputValue; //this property will be "hello"
и вы можете передавать значения (после срабатывания) от детей к родителю:
Детский код:
@Output() itemSelectedOutput: EventEmitter<any> = new EventEmitter();
buttonClicked() {
this.itemSelectedOutput.emit("clicked");
}
Родительский код:
<childComponent [someInputValue]="hello" (itemSelectedOutput)="someParentMethod($event)"></childComponent>
someParentMethod(event: any) {
console.log(event);
}
Вы можете достичь того же с помощью ISubscription
но я предлагаю вам использовать способ выше
Надеюсь, что это может помочь
[someInputValue]="hello"
, в основном [someInputValue]="hello"
напечатает это в родительском компоненте, и то же правило можно применить, если мы хотим зарегистрировать ввод данных пользователем правильно?
Я бы так не поступил именно так. Если дети должны знать о родителях, то ваша архитектура должна быть скорректирована