迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > Angular >

在 Angular 中使用 @Input()

作者:迹忆客 最近更新:2023/05/09 浏览次数:

这篇文章是关于 Angular @Input(),Angular 中使用的一个函数,用于从用户那里获取输入,然后在程序中使用它进行处理。也可以使用此函数读取文件并从外部 API 获取数据。

Angular 中的 @Input() 指令

顾名思义,@Input() 指令用于输入字段。 @Input() 最适合在表单字段和文本框中捕获用户输入。

当用户输入信息时,它会自动更新字段或文本框的值。它还接受来自其他输入和 ngModelOptions 的值以自动更新其值。

@Input() 指令具有三个属性:typenamevalue

  • type 属性指定要创建的输入字段类型。
  • name 属性指定输入字段的 id,并将在 JavaScript 代码中用作其名称。
  • 如果你创建未设置默认值的文本输入字段,则需要 value 属性。

以下是输入字段的有效类型列表:

  • Text
  • Password
  • Email Address
  • Number
  • Date Picker (Date)
  • Time Picker (Time)
  • Range Slider (Range)
  • Checkbox (Checkbox)

要使用 @Input(),你需要将其作为指令添加到所需的 HTML 元素上。

@Input() 用于将数据从父组件传输到子组件,而@Output() 用于将数据从子组件传递到父组件。 @Input() 的一个典型例子是询问用户的年龄。

以下代码将显示询问用户年龄的提示,然后将其返回给调用函数,调用函数将其分配给一个名为 age 的变量。

var age = Input("Please enter your age");

在 Angular 应用程序中使用 @Input() 的步骤

在 Angular 应用程序中使用 @Input() 需要三个步骤:

  1. @Input() 添加到 HTML 元素。
  2. ng-model 属性添加到要与输入绑定的元素。
  3. 为控制器中的 ng-model 属性分配一个表达式。

TypeScript 代码:

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    isFocusStyle = false;
    type = 'INFO';
    onFocus() {
        this.isFocusStyle = true;
        this.type = 'INFO';
    }
    onEnter() {
        this.isFocusStyle = false;
        const input = document.querySelector('input');
    }
}

HTML 代码:

<h1>Example of Angular Input</h1>
<div class="input-wrapper" [ngClass]="{'focus-style': isFocusStyle}">
    <input type="test" placeholder=" Write " (focus)="onFocus()">
</div>

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 Angular 中上传文件

发布时间:2023/04/14 浏览次数:71 分类:Angular

本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。

Angular 2 中的复选框双向数据绑定

发布时间:2023/04/14 浏览次数:139 分类:Angular

本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。

在 AngularJs 中加载 spinner

发布时间:2023/04/14 浏览次数:107 分类:Angular

我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。

在 Angular 中显示和隐藏

发布时间:2023/04/14 浏览次数:78 分类:Angular

本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。

在 Angular 中下载文件

发布时间:2023/04/14 浏览次数:104 分类:Angular

本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便