Доступ к экземпляру компонента и изменение его значения в угловых 6 - PullRequest
Новая
       16

Доступ к экземпляру компонента и изменение его значения в угловых 6

0 голосов
/ 07 сентября 2018 
<rio-hello name="World"></rio-hello>
<rio-hello [name]="helloName"></rio-hello>

  1. onClick первого компонента Я хочу изменить значение второго компонента

  2. Значение (имя) должно быть изменено с "helloworld "в" мой мир ".Оба компонента загружаются на одной странице.Как я могу различить их и изменить значение?

  3. Если оба загружаются динамически, как я могу получить доступ к экземпляру и изменить значение динамически?

Небольшой пример: https://stackblitz.com/edit/angular-iew4mn

в этом динамически загружаемом компоненте не упоминается

1 Ответ

0 голосов
/ 07 сентября 2018

Я создал stackblitz на вашем примере, который позволяет изменить имя HelloComponent, щелкнув другой HelloComponent

Объяснение

InЧтобы получить доступ к различным экземплярам компонента (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'
  }

}

Сервис довольно прост.Все, что он делает - это предоставляет

  1. функцию для добавления нового экземпляра HelloComponent к объекту helloComponents (идентификатор в качестве ключа, экземпляр HelloComponent в качестве значения) и
  2. функцию, котораяпозволяет изменить имя экземпляра HelloComponent с помощью идентификатора 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, и changeHelloComponentId, который является идентификатором экземпляра HelloComponent-экземпляра, имя которого следует изменить, если щелкнуть текущий элемент.

Наконец, вам нужно изменить свой data -лист: 

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