管道

管道示例

  public today = new Date();

<h1>管道</h1>
{
    
    {
    
    today | date:'yyyy-MM-dd HH:mm:ss'}}

执行事件 (click)=”getData()”

示例01:

  public run(): void {
    
    
    alert('这是一个自定义方法!!!');
  }

<button (click)="run()">执行事件</button>

示例02：

  public title: string = '我是一个标题';
  public getData(): void {
    
    
    alert(this.title);
  }

<button (click)="getData()">执行方法获取数据</button>

示例03：

  public title: string = '我是一个标题';
  public setData(): void {
    
    
    this.title="我已经叛变了,啊哈哈。来打我啊"
    alert(this.title);
  }

<button (click)="setData()">执行方法改变数据</button>

表单事件、事件对象

示例01：

  keyDown(e: any): void {
    
    
    console.log(e);
  }

keyDown
<!-- 键盘按下事件 -->
<input type="text" (keydown)="keyDown($event)" />

运行结果：

这是按下a键所有的属性，我们以后可以根据这些值去改进我们的代码：

altKey: false
bubbles: true
cancelBubble: false
cancelable: true
charCode: 0
code: "KeyA"
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 0
eventPhase: 0
isComposing: false
isTrusted: true
key: "a"
keyCode: 65
location: 0
metaKey: false
path: (7) [input, app-home, app-root, body, html, document, Window]
repeat: false
returnValue: true
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {
    
    firesTouchEvents: false}
srcElement: input
target: input
timeStamp: 16382.309999957215
type: "keydown"
view: Window {
    
    window: Window, self: Window, document: document, name: "", location: Location, …}
which: 65
__proto__: KeyboardEvent

示例02：

  keyDown(e: any): void {
    
    
    if (e.keyCode == 13) {
    
    
      console.log('按了一下回车');
    } else {
    
    
      //e.target 获取当前dom对象
      console.log(e.target.value);
    }
  }

  keyUp(e: any): void {
    
    
    if (e.keyCode == 13) {
    
    
      console.log(e.target.value);
      console.log('按了一下回车');
    }
  }

keyDown
<!-- 按下事件 -->
<input type="text" (keydown)="keyDown($event)" />
<br>
keyUp:
<!-- 键盘弹起事件 -->
<input type="text" (keyup)="keyUp($event)" />

运行结果：

双向数据绑定（只针对于表单）

1. 先在app.module.ts导入模块
   

import {
    
     NgModule } from '@angular/core';
import {
    
     BrowserModule } from '@angular/platform-browser';

import {
    
     FormsModule } from '@angular/forms';// 导入模块

import {
    
     AppComponent } from './app.component';
import {
    
     NewsComponent } from './components/news/news.component';
import {
    
     HeaderComponent } from './components/header/header.component';
import {
    
     HomeComponent } from './components/home/home.component';

@NgModule({
    
    
  declarations: [AppComponent, NewsComponent, HeaderComponent, HomeComponent],
  imports: [BrowserModule, FormsModule],// 导入模块
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {
    
    }

2. 定义数据

  public keywords: string;

3. 双向绑定

<h1>双向数据绑定--MVVM 只是针对表单</h1>
<input type="text" [(ngModel)]="keywords">
{
    
    {
    
    keywords}}

4. 定义方法操作值

  changeKeywords() {
    
    
    this.keywords = '我是改变后的值';
  }

  getKeywords() {
    
    
    alert(this.keywords);
  }

5. 重写测试

<h1>双向数据绑定--MVVM 只是针对表单</h1>
<input type="text" [(ngModel)]="keywords">
{
    
    {
    
    keywords}}
<br>
<button (click)="changeKeywords()">改变keywords的值</button>
<button (click)="getKeywords()">获取keywords的值</button>