angular的service服务使用方法

一、service服务

1. ng g s service/search
2. 服务组件：search.service.ts

name:string = 'kk'
public getName():string{
    return this.name
  }
  public setName(v:string):void{
    this.name = v
  }

3. 组件使用service

// ts文件
// 导入服务
import {SearchService} from '../service/search.service'
// 注入服务
constructor(public SearchService:SearchService) { }

// html文件使用
{{SearchService.name}}
<button (click)="SearchService.setName('子')">子组件按钮</button>

二、父传子：{Input}

//父 
<app-child [num]="count"></app-child>

// 子html
<h1>我是父传过来的：{{num}}</h1>
// 子ts
import { Input } from '@angular/core';
 @input() num:any;
// 使用别名： @Input('num') myNum:any;

三、子触发父事件 ： 自定义事件（也是子传参给父）:2个新东西{EventEmitter,Output}

// 父组件html：
<app-kk (myClick)="add()"></app-kk>
<app-kk (myClick)="add($event)"></app-kk>  *传参数写法*
//父ts
add(){
    this.count ++;
  }
// ********************
// 子组件html
    <button (click)="kkAdd()">我是kk组件Btn</button>
// 子ts:
// 引入 EventEmitter,Output 
①   import { EventEmitter,Output } from '@angular/core'

②   @Output() myClick = new EventEmitter();

③   kkAdd(){
        // this.myClick.emit()
       *传参数写法* this.myClick.emit("kkkkk") // 传递参数叫：payload 载荷(传参)
    }

四、双向数据绑定[(ngModel)]的使用

1. // 第一种方法：使用插件

// 组件html
<input type="text" [(ngModel)]="text">

// app.module.ts  文件
①  import { FormsModule } from '@angular/forms'

②  imports: [
    FormsModule
  ],

2. 第二种方法，input方法，也可以(keyup)

// 使用input事件绑定value 
<input type="text" (input)="changeVal($event)">
changeVal(e:any):void{
    this.text = e.target.value
  }