Angular 2+初始化输入值

Question

我正在尝试实现一个与包含输入的引导模式相对应的组件。输入通过[(ngModel)]="..." 连接到组件类中的变量，如果我在输入中输入文本（变量的值得到更新），这将起作用。

我想要做的是，当这个组件的show() 方法被调用时，输入应该填充作为参数传入的文本。这似乎不起作用，我不知道如何设置作为参数传入的初始文本（不使用 jQuery）。

以下是相关代码：

editdialog.component.html

<div id="edit_todo_modal" class="modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Edit todo</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
      </div>
      <div class="modal-body">
        <p>Editing todo: {{currentText}}</p>
        <div class="row">
          <div class="col-md-12">
            <!-- THIS IS WHERE I WANT THE INITAL TEXT -->
            <input id="edit-todo-modal-input" type="text" class="form-control" [(ngModel)]="currentText">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

editdialog.component.ts

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ListComponent } from './list.component';
import { Injectable } from '@angular/core';

declare var jQuery : any;

@Injectable()
@Component({
  selector: 'edit-todo-dialog',
  templateUrl: './editdialog.component.html',
  styleUrls: ['./editdialog.component.css']
})
export class EditTodoDialogComponent{

  currentText: string = "";
  index: number;


  /* I want to use this method to set the initial value */
  show(index: number, text: string): void {
    this.currentText = text;
    this.index = index;

    jQuery("#edit-todo-modal-input").val(this.currentText); // I don't want to use jQuery for showing the initial value, however this works
    jQuery("#edit_todo_modal").modal(); // show bootstrap modal
  }
}

提前致谢。

更新

从这个组件调用show()方法

import { Component } from '@angular/core';
import { ListService } from './list.service';
import { OnInit } from '@angular/core';
import { EditTodoDialogComponent } from './editdialog.component';

/**
 * The main todo list component
 */

@Component({
  selector: 'list-component',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
  providers: [ListService, EditTodoDialogComponent]
})
export class ListComponent implements OnInit {

  private listService: ListService;
  private editTodoDialog: EditTodoDialogComponent;
  /* ... */


  constructor(listService: ListService, editTodoDialog: EditTodoDialogComponent) {
    this.listService = listService;
    this.editTodoDialog = editTodoDialog;
  }

  ngOnInit(): void {
    this.getTodos();
  }

  /* ... */

  // TO BE IMPLEMENTED

  showEditTodoDialog(index: number) : void {
    this.editTodoDialog.show(index, this.todos[index]);
  }
}

事件是这样挂钩的：

<li class="list-group-item" *ngFor="let todo of todos; let i = index">
        <div class="todo-content">
          <p class="todo-text" (dblclick)="showEditTodoDialog(i)">
            {{todo}}
          </p>
        </div>
        <div class="todo-close">
          <button (click)="removeTodo(i)" class="btn btn-danger btn-sm">
              <i class="fa fa-remove"></i>
            </button>
        </div>
      </li>

Answer 1

问题是您使用componentReference 从ListComponent 调用show。

您不应该这样做在组件之间传递信息。

您应该使用@Input 和@Output 即Event Emitters 如果这些组件具有父子关系，否则最好的方法是使用Shared Services，一旦您将数据加载到另一个服务组件收到更改通知并订阅新数据。

更多关于如何使用父子link

更多关于如何使用共享服务的信息link

Answer 2

你试过value吗？：

 <input id="edit-todo-modal-input" type="text" class="form-control" [value]="currentText" ngModel>

对于对象，使用ngValue:

 <input id="edit-todo-modal-input" type="text" class="form-control" [ngValue]="currentText" ngModel>