0 
<rio-hello name="World"></rio-hello>
<rio-hello [name]="helloName"></rio-hello>

  1. 第一个组件的onClick 我要更改第二个组件的值

  2. 值（名称）应从“helloworld”更改为“myworld”。两个组件都加载在同一页面上。如何区分它们并更改值？

  3. 如果两者都是动态加载的，我如何访问实例并动态更改值？

小例子：https ://stackblitz.com/edit/angular-iew4mn

在这个动态加载的组件中没有提到

4

1 回答 1

0

我在您的示例上创建了一个stackblitz，它可以通过单击另一个 HelloComponent 来更改 HelloComponent 的名称

解释

为了访问组件的不同实例（HelloComponent），我使用了一个服务（HelloService），它“知道”每个 HelloComponent-Instance 的存在。

import { Injectable } from '@angular/core';
import { HelloComponent } from './hello.component';

@Injectable({
  providedIn: 'root',
})

export class HelloService {
  helloCompoents = {}

  constructor() { }

  add(_id: number, _component: HelloComponent) {
    // store a reference to the component and use the components id as identifier
    this.helloCompoents[_id] = _component;
  }

  change(_id) {
    // here you can define the new name
    this.helloCompoents[_id].name = 'some other name'
  }

}

服务很简单。它所做的只是提供

  1. 向对象添加新的 HelloComponent-instance 的函数helloComponents（id 作为键，HelloComponent-instance 作为值）和
  2. 一个函数，它使您能够通过使用 HelloComponent 的 id 来标识应该更改的组件来更改 HelloComponent 实例的名称。

由于服务还不知道任何 HelloComponent 实例，我们需要更改 HelloComponent：

import { Component, Input, OnInit } from '@angular/core';
import { HelloService } from './hello.service';

@Component({
  selector: 'hello',
  template: `<h1 (click)="change()">Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit {
  @Input() id: number;
  @Input() name: string;
  @Input() changeHelloComponentId: number;

  constructor(private helloService: HelloService) { }

  ngOnInit() {
    // add the current HelloComponent to the list of helloComponents within the service
    this.helloService.add(this.id, this);
  }

  change() {
    // call the change function of the service which will then change the name of the defined HelloComponent
    this.helloService.change(this.changeHelloComponentId);
  }
}

在创建 HelloComponent-instance 时，我们现在使用 HelloService 将当前实例添加到服务的 helloComponents 中。

click 函数将调用 helloService.change(..) 函数，然后更改名称。

HelloComponent 的模板现在看起来像这样：

<div *ngFor="let list of data ">
    <hello id="{{list.id}}" name="{{ list.name }}" changeHelloComponentId="{{list.changeId}}"></hello>
</div>

我添加了id哪个是当前 HelloComponent-instancechangeHelloComponentId的 id，哪个是 HelloComponent-instance 的 id，如果单击当前项目，应该更改其名称。

最后你需要改变你的data-list：

this.data = [
      { id: 0, "name": "rio", changeId: 1 },
      { id: 1, "name": "angu" }]
于 2018-09-07T07:53:48.763 回答