说明: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