0

我有 2 个组件：CommandListComponent和CommandLineComponent. 在CommandListComponent模板内部，我处理文本字符串上的单击事件：

CommandListComponent模板：

<li *ngFor="#command of commandList" class="b-command-list__command"><span (click)="checkCommand(command)" class="b-command-list__text">{{command}}</span></li>

commandlist.component.ts

import {CommandLineComponent} from "./commandline.component";

...

export class CommandListComponent {
    commandLineComponent: any;

    constructor(private _commandLine: CommandLineComponent) {
        this.commandLineComponent = _commandLine;
    }

    checkCommand(command: string): void {
        this.commandLineComponent.add(command);
    }

}

当click被触发时，我将选择的命令传递给adda 的方法CommandLineComponent：

export class CommandLineComponent {
    commands: string[] = [];

    add(command: string): void {
        if (command) this.commands.push(command);
        console.log(this.commands);
    }
}

在一个CommandLineComponenti 的模板中，使用 *ngFor 打印一个命令列表：

<li *ngFor="#command of commands" class="b-command-textarea__command">{{command}}</li>

commands但是当我选择更新的命令和数组时， *ngFor 不会触发CommandLineComponent。因此，数据绑定不起作用。commands阵列更新成功：

在此处输入图像描述

谢谢你的帮助。

4

1 回答 1

1

问题在于您引用commandLineComponent组件的方式。如果它们之间存在关系，您可以使用ViewChild装饰器

class CommandListComponent {
  @ViewChild(CommandLineComponent)
  commandLineComponent: any;
  (...)
}

如果没有，则需要使用共享服务commands在这两个组件之间共享列表。像这样的东西：

export class CommandService {
  commands:string[] = [];
  commandAdded:Subject<string> = new Subject();

  add(command: string): void {
    if (command) {
      this.commands.push(command);
      this.commandAdded.next(command);
    }
    console.log(this.commands);
  }
}

您需要在引导应用程序时定义服务，并且两个组件都可以注入它。

class CommandListComponent {
  constructor(private commandService:CommandService) {
  }
}

checkCommand(command: string): void {
    this.commandService.add(command);
}

组件将CommandLineComponent收到这样的新命令通知，并可以相应地更新视图：

class CommandLineComponent {
  constructor(private commandService:CommandService) {
    this.commandService.commandAdded.subscribe(command => {
      // Update the list displayed in the component...
    });
  }
}
于 2016-05-06T12:59:59.470 回答