angular 中使用服务

创建服务文件

model.service.ts

import { Component ,Injectable} from '@angular/core'
@Injectable(
    {providedIn:'root'}
)
export class ModelService{
    index = 0 ;
    data = [{
        name:"zhangsan"
    },{
        name:"lisi"
    },
    {
        name:"wangwu"
    }]
    constructor(){
    }
    btn(){
        this.data.push({name:"zhaoliu"+this.index})
        this.index++;
    }
}

[InjectorType]

• ‘root’：大多数应用程序中的应用程序级注入器。
• ‘platform’：页面上所有应用程序共享的特殊单例平台注入器。
• ‘any’：在每个注入令牌的模块（包括惰性模块）中提供唯一的实例。

直接根模块注入

import { modelService } from './modelService ';


@NgModule({
    imports: [
        ...
    ],
    declarations: [        //生命模块内组件
        ...
    ],
    providers: [ modelService ],  // 注入服务
    bootstrap: [...]      //主界面，只有根模块可用
})
export class AppModule {
} 

组件中注入

import { Component } from '@angular/core'; 
import { modelService} from './modelService';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [ modelService],  // 注入服务
})
export class AppComponent {
    constructor( service: modelService) {
        
    }
}

组件中使用服务

import { Component ,Injectable} from '@angular/core'
import { ModelService} from './model.service' 
@Injectable()
@Component({
    selector: 'app-view-model',
    template: `
    <ul>
    <ng-container *ngFor = "let ov of data.data,let i=index" >
    {{i}}<li>{{ov.name}}</li>
    </ng-container>
    </ul>
    <button (click)="add()">add</button>
    `,
  })
export class  viewModelComponent{
    data
    constructor(private Service:ModelService){//如过使用private 服务 则需要接受，使用公有服务则直接可以在模板中使用
    }
    add(){
        this.Service.btn();
    }
  }