angular登录按钮输入框监听

news/2024/11/1 17:25:20/

说明:angular实现简单的登录页面,监听输入框的值,打印出来,按钮监听,打印数据

效果图:

step1:E:\projectgood\ajnine\untitled4\src\app\app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimations } from '@angular/platform-browser/animations';import { routes } from './app.routes';export const appConfig: ApplicationConfig = {providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimations()]
};

step2:E:\projectgood\ajnine\untitled4\src\app\user\user.component.ts

import {Component, OnInit} from '@angular/core';
import {MatButtonModule} from '@angular/material/button';
import {MatInputModule} from '@angular/material/input';
import {FormsModule} from '@angular/forms';@Component({selector: 'app-user',standalone: true,imports: [MatButtonModule, MatInputModule, FormsModule],templateUrl: './user.component.html',styleUrl: './user.component.css'
})
export class UserComponent implements OnInit {todos: Todo[] = [];dialogData: Todo = {task: '', description: ''};getClick(name: string) {console.log('you click this button')console.log(name)names = name}getLoginClick(name: string) {console.log(this.dialogData.task, this.dialogData.description)}animal() {return names}protected readonly names = names;ngOnInit(): void {}
}var names = ''interface Todo {task: string;description: string;
}

step3:

<p>欢迎来到登录页!</p>
<button style="background: deepskyblue;color: white" mat-button (click)="getClick('测试数据123')">Basic</button>
<button style="margin-left:50px;background: red;color: white" mat-button (click)="getLoginClick('测试数据456')">登录
</button><li>You chose: <em>{{ animal() }}</em>
</li><mat-form-field><input matInput placeholder="Task" [(ngModel)]="dialogData.task">
</mat-form-field>
<mat-form-field style="margin-left: 50px"><input matInput placeholder="Description" [(ngModel)]="dialogData.description">
</mat-form-field>

end


http://www.ppmy.cn/news/1543639.html

相关文章

技术干货|HyperMesh CFD功能详解:虚拟风洞 Part 1

虚拟风洞VWT 从2023版本开始&#xff0c;虚拟风洞VWT&#xff08;Virtual Wind Tunnel&#xff09;模块合并到HyperMesh CFD中。 用户在VWT模块中完成LBM求解器ultraFluidX的前处理设置&#xff0c;导出参数文件XML和模型文件STL&#xff0c;并在GPU服务器上提交计算。 VWT目前…

2024Selenium自动化常见问题!

"NoSuchElementException"异常&#xff1a; 确保使用了正确的选择器来定位元素。可以使用id、class、XPath或CSS选择器等。 可以尝试使用find_elements方法来查找元素列表&#xff0c;并检查列表的长度来判断元素是否存在。 使用显式等待&#xff08;WebDriverWait…

fetch: 取消请求、读取流、获取下载进度...

引言 Fetch API 提供了一个获取资源的接口(包括跨网络通信)。对于任何使用过 XMLHttpRequest 的开发者来说, 对于 Fetch 应该都能轻松上手, 而且新的 API 提供了更强大和灵活的功能集… 本文主要就是记录下, 在使用 Fetch 期间可能会碰到的几个小案例… 一、取消请求 在前端…

YOLOv6-4.0部分代码阅读笔记-loss_fuseab.py

loss_fuseab.py yolov6\models\losses\loss_fuseab.py ‌YOLOv6中的 loss_distill_ns 、 loss_distill 、 loss_fuseab 和 loss 的区别主要在于它们的应用场景、功能和目的。‌ ‌loss_distill_ns &#xff1a; ‌应用场景‌ &#xff1a;主要用于小模型&#xff0c;如YOLOv…

线性代数群论应用:正逆运动学 变换矩阵

在机器人学中&#xff0c;为了描述机器人的运动&#xff0c;将机器人建模为正运动学和逆运动学 正运动学&#xff1a;从机器人的关节空间描述计算笛卡尔空间描述的机器人末端执行器的位置和姿态&#xff0c;该问题通常是一个几何问题&#xff0c;给定一组关节角度&#xff0c;…

Vue将所展示文本内容的换行与空格显示出来

使用<pre>标签 <pre>{{ content }}</pre>设置white-space样式&#xff08;推荐&#xff09; <div class"content">{{ content }} </div> .content{white-space: pre-wrap; }菜鸟教程&#xff1a;white-space: pre-wrap;的用途在于它…

QT-使用QSS美化UI界面

一、QSS简介&#xff1a; Qt Style Sheet&#xff1a;Qt样式表&#xff0c;用来自定义控件外观的一种机制&#xff0c;可以把他类比成CSS&#xff08;CSS主要功能与最终目的都是能使界面的表现与界面的元素分离&#xff09;。QSS机制使应用程序也能像web界面那样随意地改变外观…

瑞芯微 RKNN SDK 快速上手指南--Banana Pi开源社区

此文档面向零基础用户详细介绍如何快速在计算机上使用 RKNN-Toolkit2 完成模型转换&#xff0c;并通过 RKNPU2 部署到 Rockchip 开发板上。本文所用示例已集成到 RKNN Model Zoo 中。 支持的平台&#xff1a;RK3562、RK3566系列、RK3568系列、RK3576系列、RK3588系列 开发板&a…