Question

有点棘手的情况。对于下面的代码，我添加了(keydown.enter)="false"来忽略textarea中的break line / enter按钮

这会导致用户问题，并希望按Enter键的现有行为应自动触发＆＃34;保存按钮＆＃34;

任何想法如何在仍然聚焦在textArea但忽略断裂线时触发Save按钮？

    <textarea #textArea
    style="overflow:hidden; height:auto; resize:none;"
    rows="1"
    class="form-control"
    [attr.placeholder]="placeholder"
    [attr.maxlength]="maxlength"
    [attr.autofocus]="autofocus"
    [name]="name"
    [attr.readonly]="readonly ? true : null"
    [attr.required]="required ? true : null"
    (input)="onUpdated($event)"
    [tabindex]="skipTab ? -1 : ''"
    (keydown.enter)="false"
    [(ngModel)]="value">
    </textarea >

Answer 1

您可以将Save按钮的相同功能绑定到texterea的keydown.enter，并调用$event.preventDefault以避免换行。

示例plunker。

Answer 2

通过@Pengyy扩展答案

您可以将Enter键绑定到pseudoSave函数，并在其中使用preventDefault，从而防止Save函数和换行符。然后你可以从那里调用save函数（假设它是可访问的，比如一个服务），或者你可以发出一个EventEmitter，然后捕获这个emit来触发Save函数。

Answer 3

您可以创建一个服务，该服务可以向将处理该命令的其他组件发送通知。该服务可能如下所示：

import { Injectable } from "@angular/core";
import { Subject } from "rxjs/Subject";

@Injectable()
export class DataSavingService {

    private dataSavingRequested = new Subject<void>();
    public dataSavingRequested$ = this.dataSavingRequested.asObservable();

    public requestDataSaving(): void {
        this.dataSavingRequested.next();
    }
}

...并且应该在模块的providers部分注册。注意：如果必须在通知中传递数据，则可以为dataSavingRequested主题声明非空参数类型（例如string）。

该服务将使用textarea元素注入组件，并在 Enter keypress事件的处理程序中调用：

import { DataSavingService } from "./services/data-saving.service";
...

@Component({
    template: `
        <textarea (keypress.enter)="handleEnterKeyPress($event)" ...></textarea>
    `
})
export class ComponentWithTextarea {
    constructor(private dataSavingService: DataSavingService, ...) {
        ...
    }

    public handleEnterKeyPress(event: KeyboardEvent): void {
        event.preventDefault(); // Prevent the insertion of a new line
        this.dataSavingService.requestDataSaving();
    }
    ...
}

带有“保存”按钮的组件将订阅服务的dataSavingRequested$通知，并在收到通知时保存数据：

import { Component, OnDestroy, ... } from "@angular/core";
import { Subscription } from "rxjs/Subscription";
import { DataSavingService } from "../services/data-saving.service";
...

@Component({
    ...
})
export class ComponentWithSaveButton implements OnDestroy {

    private subscription: Subscription;

    constructor(private dataSavingService: DataSavingService, ...) {
        this.subscription = this.dataSavingService.dataSavingRequested$.subscribe(() => {
            this.saveData();
        });
    }

    public ngOnDestroy(): void {
        this.subscription.unsubscribe();
    }

    private saveData(): void {
        // Perform data saving here
        // Note: this method should also be called by the Save button
        ...
    }
}

上面的代码假定必须使用“保存”按钮在组件中执行保存。另一种方法是将该逻辑移动到服务中，这将暴露可由组件调用的saveData方法。但是，该服务需要收集数据才能保存。它可以使用Subject / Observable机制获得，或者由组件直接提供为saveData的参数，或者通过调用服务的另一种方法。

Answer 4

它可能是2个解决方案：

使用javascript处理输入事件并触发其中的保存功能

或

使用Angular方面的相同内容，如this中所述。

This 也可以帮助您

Textarea忽略输入但需要触发Save按钮

4 个答案: