javascript - 在Angular中单击原始组件时触发克隆组件

Question

我在一个组件上有一个循环，它代表我真实应用程序上的图形卡列表。

我已将此组件（并将其循环）复制为原始组件

你好组件

export class HelloComponent  {
   message:string;
   printedMessage:string
   @Input() elm:string;
  constructor(private data: DataService, private router : Router) { }

  ngOnInit() {
    this.message = this.data.messageSource.value;
    this.data.messageSource.subscribe(message => this.message = message)

  }

  updateService(){
    this.data.changeMessage(this.message);
    this.printedMessage=this.data.messageSource.value
  }

  navigateToSibling(){
    this.router.navigate(['/sibling']);
  }
}

app component

<div *ngFor="let elm of [1,2,3,4]">
<hello [elm]= "elm"></hello>
</div>

<h1>Copy </h1>
<div *ngFor="let elm of [1,2,3,4]">
<hello [elm]= "elm"></hello>
</div>

数据服务组件

export class DataService {

  messageSource = new BehaviorSubject<string>("default message");
  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

预期行为

例如，当更改组件 1 上的输入值时，只有复制的组件 1 的输入值会发生变化。

实际行为

实际上，当我更改输入中的值时，所有其他输入都在更改。

这是一个stackblitz示例

标签： javascriptangularobservable

Answer 1

以下是可以解决您问题的解决方案。这可能不是一个完美的解决方案，但您需要类似的东西。

你好.html

<h1>App component {{elm}}</h1>
<input type="text" [(ngModel)]="message">

<button (click)="updateService()" type="button">Save</button> {{printedMessage}}

数据服务

import {
  Injectable
} from '@angular/core';
import {
  BehaviorSubject
} from 'rxjs/BehaviorSubject';

@Injectable()
export class DataService {

  messageSource = new BehaviorSubject < any > ("default message");
  constructor() {}

  changeMessage(message: string, elem: any) {
    this.messageSource.next({
      message: message,
      elem: elem
    });
  }

}

你好组件

import {
  Component,
  Input
} from '@angular/core';
import {
  DataService
} from "./dataService";
import {
  Router
} from '@angular/router';
@Component({
  selector: 'hello',
  templateUrl: './hello.html',
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  message: string;
  printedMessage: string
  @Input() elm: string;
  constructor(private data: DataService, private router: Router) {}

  ngOnInit() {
    this.message = this.data.messageSource.value;
    this.data.messageSource.subscribe(message => this.message = message.elem === this.elm ? message.message : this.message);

  }

  updateService() {
    debugger
    this.data.changeMessage(this.message, this.elm);
    this.printedMessage = this.data.messageSource.value.message;
  }

  navigateToSibling() {
    this.router.navigate(['/sibling']);
  }
}

还更新了Stackblitz 演示。希望这可以帮助 ：）