二、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_appid=63668&showapi_sign=31c73b7db6b34ed59250ecb5c370b6e2';
  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_appid=63668&showapi_sign=31c73b7db6b34ed59250ecb5c370b6e2';
    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("調用服務方法");
  }
}