Как получить доступ к циклу for родительского компонента внутри дочернего компонента, который имеет входы?

1

Так что я застрял на этом. Я пытаюсь заставить родительский компонент общаться или взаимодействовать с дочерним компонентом. Вот родительский компонент, который в основном имеет цикл 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 родительского компонента, если это возможно.

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация, такая как файлы компонентов или разъяснения

  • 0
    Чтобы позволить родительскому компоненту регистрировать входные данные от дочернего компонента, вы используете так называемые генераторы событий, см. Также официальные документы.
  • 0
    @mhodge Но позволят ли генераторы событий обрабатывать цикл for в дочернем компоненте?
Показать ещё 6 комментариев
Теги:
angular
arrays

3 ответа

1

Приведенный ниже код и пример продемонстрируют, как данные @Input() из parent → child → parent с использованием @Input() и @Output().

Рабочий пример здесь

parent.component.ts

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}"');
  }

}

child.component.ts

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});
  }

}
  • 0
    По какой-то причине я не смог получить доступ к ссылке с примером, но ваше решение определенно ответило на мой вопрос и имеет смысл! Мой единственный вопрос - заполнен ли массив публичных URL ожидаемым выводом? или вы специально добавили пример данных там?
  • 0
    @ B.Allen Массив public urls просто заполнен данными примера. Вы можете заполнить этот список по своему усмотрению. Он будет выдавать URL-адреса дочернему компоненту и отображать их соответствующим образом. Кроме того, я исправил ссылку выше, так что теперь у вас должен быть доступ к рабочему примеру.
Показать ещё 1 комментарий
1

Самый простой способ дать компонентам запятнать друг друга - это ввод-вывод:

Вы можете передать значения от родителя к потомкам с помощью @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 но я предлагаю вам использовать способ выше

Надеюсь, что это может помочь

  • 0
    Я [someInputValue]="hello" , в основном [someInputValue]="hello" напечатает это в родительском компоненте, и то же правило можно применить, если мы хотим зарегистрировать ввод данных пользователем правильно?
  • 0
    @ B.Allen при вводе вы передаете значение, принадлежащее родительскому компоненту, дочернему компоненту. Вы должны представить себе такие компоненты, как блоки, где вы не можете видеть вне их, если не с входными и выходными параметрами, которые являются способами связать друг друга. Во всяком случае, да, вы можете передать все, что вы хотите, объекты тоже. Если вы нашли мой ответ правильным, отметьте его как лучший ответ :)
Показать ещё 1 комментарий
0

Я бы так не поступил именно так. Если дети должны знать о родителях, то ваша архитектура должна быть скорректирована

Ещё вопросы

Сообщество Overcoder
Наверх
Меню