如何在具有輸入的子組件中訪問父組件的for循環？

Question

所以我被困在這。 我試圖讓父組件與子組件進行對話或集成。 這是父組件，基本上，如果用戶要添加更多或按下按鈕添加更多，則該組件主要具有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循環中獲取幫助。

如果您需要更多信息，例如組件文件或說明，請告訴我

Answer 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達成相同的目標，但我建議您使用上述方式

希望能有所幫助

Answer 2

下面的代碼和示例將通過使用@Input()和@Output()指令演示數據如何從父級->子級->父@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'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});
  }

}

Answer 3

我不會特別這樣做。 如果孩子們必須了解父母，那么應該調整您的建築