如何在具有输入的子组件中访问父组件的for循环? [英] How do you access the for loop of the parent component within a child component which has the inputs?

问题描述

所以我坚持了这一点.我正在尝试让父"组件与子组件进行对话或集成. 这是父组件，如果用户要添加更多或按下按钮添加更多，则其父组件基本上具有用于循环或生成更多链接的for循环.

So I am stuck on this. I am trying to get the Parent component to talk or integrate with the child component. Here is the parent component which basically has the for loop used to iterate or generate more links if a user wants to add more or presses the button to add more.

<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>

父组件仅应能够注册和显示子组件的输出.

The parent component should only be able to register and display the output of the child component.

这是子组件的示例

<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循环中进行迭代.

I need help both allowing the parent component to register input from the child component and being able to iterate from the for loop from the parent if it is possible.

如果您需要更多信息，例如组件文件或说明，请告诉我

Please let me know if you need more information such as the component files or clarification

推荐答案

以下代码&该示例将演示如何使用@Input()和@Output()指令从父->子->父中流数据.

The below code & example will demonstrate how data flows from parent -> child -> parent by using the @Input() and @Output() directives.

在此处工作的示例

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

}

这篇关于如何在具有输入的子组件中访问父组件的for循环?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！