Question

我有一个父组件（profile-characteristics.component.ts）和一个子模态组件（pc-predefined-list.component.ts）。

当在父组件模板中更改下拉选项时，我需要在子模式模板中显示其对应的值。

子组件方法如下。

 constructor(
    private utilsService: UtilsService,
    private route: ActivatedRoute,
    private _fb: FormBuilder,
    @Inject(DOCUMENT) private document: Document
  ) {}

  ngOnInit() {
    this.pListValueForm = this._fb.group({
      pListValues: this._fb.array([this.initItemRows()]) // here
    });
    //this.setListValues();
    this.route.params.subscribe(params => {
      this.accountId = params['id'];
    });
  }
setListValues() {

    this.pListValueForm = this._fb.group({
      pListValues: this._fb.array([]) // here
    });

    const control = <FormArray>this.pListValueForm.controls['pListValues'];
    this.selectedListValues.forEach(x => {
      control.push(this.patchValue(x.profile_characteristic_list_value_id, x.name, x.sort_order))
    });
  }

父组件

  ngAfterViewInit() {
// child is set
this.child.setListValues();

}

如果我将this.selectedListValues硬编码如下，那么模态将正常工作。

this.selectedListValues = [ { "profile_characteristic_list_value_id": "13110afd-f459-11e7-9d12-408d5cbccb60", "profile_characteristic_list_id": "1", "name": "value 2", "sort_order": "2" }, { "profile_characteristic_list_value_id": "13110e5f-f459-11e7-9d12-408d5cbccb60", "name": "value 4", "sort_order": "4", "profile_characteristic_list_id": "2", } ];

我需要将“ selectedListValues ”动态地从父组件传递到子组件。关于如何实现这一点的任何想法？

Answer 1

如果是我的问题，我会在您的子组件中创建一个输入：

@Input() chosenValue: any;

然后将值传递给孩子：

<app-pc-predefined-list [chosenValue]="YourParentVariable"></app-pc-predefined-list>

我会让我的孩子实施onChanges：

export class PcPredefinedListComponent implements OnChanges {
  // Your code ...

  ngOnChanges(changes: SimpleChanges) {
    console.info(changes);
  }
}

这样，每次更改父母的列表时，您的孩子都会收到通知，并且可以启动您的方法来过滤您的列表选项。

Answer 2

您可以想到两个选项：

1）使子组件成为父组件的Viewchild，允许您从父组件调用子元素函数并将selectedListValues作为参数传递。如何触发函数调用取决于您。

2）使用数据绑定。从列表选择中定义父组件中的输出，发出列表。然后在子组件中实现一个Input，将列表作为属性进行存储。每次更新父组件的选择时传递该列表，都可以触发显示列表的功能。 See here 如果您需要更多帮助或代码示例，请告诉我，但我喜欢在长期工作方面的学习。

享受有趣的编码

Answer 3

我多次使用过这种模式，效果很好！

两个组件（父组件及其子组件或其他不同组件）可以共享其接口支持双向通信的服务。

与Observer模式类似，在这种情况下，服务实例的范围是来自组件（Publisher）和其他组件（订阅者）的通知。

要传递给孩子复杂的数据类型（比如你的“selectedListValues”）我通常使用一个外部类来表示其数据字段：

model.ts

export class ListValues
{
    public profile_characteristic_list_value_id: string;
    public profile_characteristic_list_id: number;
    public name: string;
    public sort_order: string;
}

mycomponent.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { ListValues} from './model';
@Injectable()
export class MyComponentService{
    // Observable 
    private sampleObservable = new Subject<ListValues>();
    // Observable boolean streams
    sampleSubscriber = this.sampleObservable.asObservable();
    // Event for notification from publisher to subscriber
    sampleEventChanged(value:ListValues)
    {
        this.sampleObservable.next();
    }
}

在想要通知所有订户状态更改的组件中：

mycomponent-publisher.ts（您是父组件）

import { Component } from '@angular/core';
import { MyService } from './mycomponent.service';

@Component({
  selector: 'app-my-control-publisher',
  template: `
  <h2>This is the publisher control</h2>
  <button (click)="announce()">Announce to subscriber</button>
  `,
  providers: [MyService]
})

export class MyControlPublisherComponent 
{
  constructor(private myService: MyService) { }

  announce() 
  {
      listValues = new ListValues();
      // here set the info to notify...
      this.myService.sampleEventChanged(listValues);
  }
}

在想要获取通知的订阅者组件中。

mycomponent-subscriber.ts（您是子组件）

import { Component, OnDestroy } from '@angular/core';
import { MyService } from './mycomponent.service';
import { Subscription } from 'rxjs/Subscription';
import { ListValues} from './model';

@Component({
 selector: 'app-my-control-subscriber',
 template: `
 <h2>This is the subscriber control</h2>
 `,
})

export class MyControlSubscriberComponent 
{
  // Subscriptions
  private componentSubscription: Subscription;

  constructor(private myService: MyService) 
  {
    // Subscription of the notifications
    this.componentSubscription= this.myService.sampleSubscriber.subscribe(value =>
    {
      // Put the code for manage the notification here
      // value is of type 'ListValues'
    }
  }

  ngOnDestroy()
  {
    // Release subscription to avoid memory leaks when the component is destroyed
    this.componentSubscription.unsubscribe();
  }
}

Angular4 - 从父组件到子模态组件调用方法

3 个答案: