<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("调用服务方法");
}
}

二、angular7的基础知识学习的更多相关文章

  1. 【转载】salesforce 零基础开发入门学习(二)变量基础知识,集合,表达式,流程控制语句

    salesforce 零基础开发入门学习(二)变量基础知识,集合,表达式,流程控制语句 salesforce如果简单的说可以大概分成两个部分:Apex,VisualForce Page. 其中Apex ...

  2. GCC基础知识学习

    GCC基础知识学习 一.GCC编译选项解析 常用编译选项 命令格式:gcc [选项] [文件名] -E:仅执行编译预处理: -S:将C代码转换为汇编代码: -c:仅执行编译操作,不进行连接操作: -o ...

  3. (转)Linux基础知识学习

    Linux基础知识学习 原文:http://blog.csdn.net/ye_wei_yang/article/details/52777499 一.Linux的磁盘分区及目录 Linux的配置是通过 ...

  4. Objective-c基础知识学习笔记

    Objective-c基础知识学习笔记(一) 一直有记录笔记的习惯.但非常久没分享一些东西了,正好上半年開始学习IOS了,如今有空写点.因开发须要,公司特意为我们配置了几台新MAC.还让我们自学了2周 ...

  5. Vue2基础知识学习

    Vue2基础知识学习 01.初识 new Vue({ el: '#root', //用于指定当前Vue实例为哪个容器服务,值通常为css选择器符 data () { return { } } }); ...

  6. AXAJ基础知识学习

    AXAJ基础知识学习 博客首页 Ajax简介 ajxa全称是Asynchronous Javascript And XML ,就是异步的JS 和XML 通过Ajax可以再浏览器中向服务器发送异步请求, ...

  7. elastic search&logstash&kibana 学习历程(二)es基础知识

    简介:es的index索引,document文档对象,副本,多节点集群等基础知识 1.通俗的解释: 在Elasticsearch中,文档归属于一种类型(type),而这些类型存在于索引(index)中 ...

  8. 韩天峰博客 php基础知识学习记录

    http://rango.swoole.com 写好PHP代码真的不容易,给大家几个建议: 慎用全局变量,全局变量不好管理的,会导致你的代码依赖于全局变量,而耦合度太高. 一定不要复制粘贴代码,可重用 ...

  9. Linq的简介和基础知识学习

    学习LINQ之前,我们要知道LINQ是干什么,解决什么问题的,怎样学习? 一.LINQ简介 1.什么是LINQ? 什么是LINQ?LINQ中文翻译为语言集成查询(Language Integrated ...

随机推荐

  1. 获取fork+exec启动的程序的PID值

    问题背景     业务中有个场景需要自动起一个A程序(由于A程序与 sublime_text 启动后遇到的问题有相似之处,后文就用 sublime_text 来替代A程序,当A程序与 sublime_ ...

  2. redis学习(二)

    深入了解redis字符串,列表,散列和有序集合命令,了解发布,订阅命令和其他命令.   一,字符串   1.字符串可以存储3种类型的值 字符串,整数,浮点数 2.运算命令列表 incr : incr ...

  3. python 并发编程 多进程 目录

    python multiprocessing模块 介绍 python 开启进程两种方法 python 并发编程 查看进程的id pid与父进程id ppid python 并发编程 多进程 Proce ...

  4. P1079Vigenère密码

    这是2012年noip提高组的的DAY1T1,我用了一下午的时间,一次性AC^^. 这是一个字符串的模拟题.首先给出了一个密码对应法则,我们发现在同一对角线的明文通过密钥得出来的密文是相同的.根据八皇 ...

  5. 中标麒麟(linux)mysql配置记录

    刚装好mysql时,使用正常,后来再次使用时,连接不成功.(虚拟机中) 配置网络有问题, 1.我将ifcfg-*的两个文件备份后删除了. 2.点击右下角的小电脑,重新新建一个网络连接.把网络接入主机的 ...

  6. 使用CSDN-markdown编辑器粘贴代码块时崩溃问题解决

    原因:代码段换行符失效,所有代码一行显示 解决方法:使用Chrome浏览器即可解决(使用Microsoft Edge会出现此问题) 效果展示: # _*_ coding:utf-8 _*_ impor ...

  7. 使用ajax发送文件的三种方式及预览图片的方法,上传按钮美化

    后端代码 def upload(request): if request.method == "GET": return render(request,'upload.html') ...

  8. html5移动端Meta的设置

    强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览 1 <meta name="viewport" content=&quo ...

  9. wpf中文本框只能输入整数

    private void txtBarCodeNum_KeyUp(object sender, KeyEventArgs e) { TxtInt(sender as TextBox); } priva ...

  10. makeinfo - 翻译 Texinfo 文档

    SYNOPSIS 总览 makeinfo [OPTION]... TEXINFO-FILE... DESCRIPTION 描述 将 Texinfo 源文档翻译为各种其他格式,默认是可以用 Emacs ...