Question

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

onClick的值第二部分
值（名称）应从“ helloworld”更改为 “我的世界”。这两个组件都加载在同一页面上。我怎么能够区分它们并更改值？
如果两个都动态加载，如何访问实例并动态更改值？

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

在此动态加载的组件中未提及

Answer 1

我在您的示例中创建了一个stackblitz，这使得可以通过单击另一个HelloComponent来更改HelloComponent的名称。

说明

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

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

}

服务非常简单。它所做的就是提供

将新的HelloComponent实例添加到对象helloComponents（id为键，HelloComponent-instance为值）和
一个使您能够更改名称的功能通过使用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实例时，我们使用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实例的ID）和changeHelloComponentId（这是HelloComponent实例的whos的名称），如果单击了当前项目，则应更改其名称。 / p>

最后，您需要更改data列表：

this.data = [
      { id: 0, "name": "rio", changeId: 1 },
      { id: 1, "name": "angu" }]

访问组件的实例并以角度6更改其值

1 个答案:

说明