访问组件实例并在 angular 中更改其值 6

Question

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

第一个组件的onClick我要改变的值第二部分
值（名称）应从 "helloworld" 更改为 "myworld"。两个组件都加载在同一页面上。我怎么能够区分它们并更改值？
如果两者都是动态加载的，我该如何访问实例和动态更改值？

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

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

Answer 1

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

说明

为了访问组件 (HelloComponent) 的不同实例，我使用了一个服务 (HelloService)，它 "knows" 关于每个 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 实例添加到 object helloComponents (id 为 key, HelloComponent-instance 为值）和
一个可以让你改变名字的函数 HelloComponent-instance 通过使用 HelloComponent 的 id 来确定应该更改的组件。

由于服务还不知道任何 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。

单击函数将调用 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 实例的 ID，如果单击当前项，则应更改其名称.

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

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

访问组件实例并在 angular 中更改其值 6

Access an instance of a component and change its value in angular 6

angular

angular6

angular-services

angular-dynamic-components

说明