angular学习之路-二、angular7的基础知识学习

<p>
  hello works
</p>
<div *ngIf="isShow">我是测试内容</div>
<p>
  <input type="button" (click)="isShow=!isShow" value="显示和隐藏"/>
</p>
<ul>
  <li *ngFor="let item of items">{{item}}</li>
</ul>
<!--双向数据绑定-->
<p>
  请输入用户名：<input type="text" value="" [(ngModel)]="username"/>
</p>
<h3>你的用户名是：{{username}}</h3>
<!--调用服务-->
<p>
  <input type="button" (click)="show()" value="调用服务"/>
</p>
<hr/>

angular创建组件命令：

ng g component pubcoms/head;

pubcoms为目录，head为创建文件和head目录。

angular创建服务：

ng g services services/myservices;

services为目录，myservices为创建service文件。

创建之后在app.module.ts文件中配置：

加入：import {MyservicesService} from './services/myservices.service';

MyservicesService必须跟创建服务后中的myservices.service.ts文件中的类名一致(export class MyservicesService{}).

并在文件中的providers：[{.....},'MyservicesService']中声明，在需要用到服务的模块中声明服务：

比如在head中需要：在head头部引用，需要在head.component.ts中加入：import {MyservicesService} from '../../services/myservices.service';

并在构造函数中声明：

constructor(private myservice:MyservicesService){};

引用http模块：

在head加载时引用，在head.component.ts头部加入：import {Http} from 'angular@http';

并在构造函数中声明：

constructor(private myservice:MyservicesService,private http:Http){};

还需要在app.module.ts头部中添加引用：

import {HttpModule} from '@angular@http';

在下面的imports中加入：

imports:[
　　BrowserModule,
　　AppRoutingModule,
　　NgZorroAntdModule,
　　FormsModule,
　　HttpModule,
　　HttpClientModule,
　　BrowserAnimationsModule
]

在head加载时调用该http请求：

//页面加载时请求
ngOnInit() {
  const remoteUrl='http://route.showapi.com/341-1?showapi_app;
  this.http.get(remoteUrl).subscribe((data)=>{
    console.log(data);
  })
}

import { Component, OnInit } from '@angular/core';
//引用http模块
import { Http } from '@angular/http';

//引用服务
import { MyservicesService } from '../../services/myservices.service';

@Component({
  selector: 'app-head',
  templateUrl: './head.component.html',
  styleUrls: ['./head.component.less']
})
export class HeadComponent implements OnInit {
  public isShow=true;
  public items=['你好','我好','大家好'];
  public username="廖某某";
  //声明服务
  constructor(private myservice:MyservicesService,private http:Http) {

  }
  //页面加载时请求
  ngOnInit() {
    const remoteUrl='http://route.showapi.com/341-1?showapi_app;
    this.http.get(remoteUrl).subscribe((data)=>{
      console.log(data);
    })
  }
  show() {
    this.myservice.showMSG();
  }
}

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgZorroAntdModule, NZ_I18N, en_US } from 'ng-zorro-antd';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
import { BannerComponent } from './pubcoms/banner/banner.component';
import { HeadComponent } from './pubcoms/head/head.component';
import { FootComponent } from './pubcoms/foot/foot.component';
import {MyservicesService} from './services/myservices.service';

registerLocaleData(en);

@NgModule({
  declarations: [
    AppComponent,
    BannerComponent,
    HeadComponent,
    FootComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgZorroAntdModule,
    FormsModule,
    HttpModule,
    HttpClientModule,
    BrowserAnimationsModule
  ],
  providers: [{ provide: NZ_I18N, useValue: en_US },MyservicesService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyservicesService {

  constructor() { }

  showMSG(){
    console.log("调用服务方法");
  }
}