angular 100例

https://blog.youkuaiyun.com/kingov/article/details/81452331#10_5

例1，hello world

增加一个文本输入框，输入用户名。

增加一个按钮，点击后，在web页面上显示"hello world, xxx, 2018-9-24"

在app.component.html增加下面的代码
<h1> {{title}} </h1>
<div>
  <input #name>
  <button (click)="onClick(name.value)">当前时间</button>
</div>

在app.component.ts增加下面的代码
  onClick(name){
    let date = new Date();
    let dateStr = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
    this.title = 'hello world, '+ name + " " + dateStr  
  }

例2，双向绑定[()], 组件对外输出信息(), 对组件输入信息[],  管道

<h1>{{title}}</h1>
<div>
  <input #name>
  <button (click)="onClick(name.value)">当前时间</button>
</div>
<div [style.color]="mycolor" [title]="attr">
  test
</div>
<div >
  <input [ngModel]="5">
  <input [ngModel]="attr">
  <input [(ngModel)]="attr">
</div>
<div>
  <br>
  <input [(ngModel)]="name2">
  <br>
  <label>hello,{{name2 + mydate|date:"y-MM-dd"}} {{mydate|date:"y-MM-dd"}}</label>
</div>


export class AppComponent {
  title = 'app works!';
  
  mycolor='red';
  mystyle="color:blue;font-size:12px"
  attr = "135-2687-4321"

  name2 = ""
  mydate = new Date();
  onClick(name){
    let date = new Date();
    let dateStr = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
    this.title = 'hello world, '+ name + " " + dateStr  
  }
}

例3， 父组件，子组件

cd 到src/app目录下，ng g c  parent1 -it -is   创建了一个组件。

这个命令是 ng generate Component parent1 --inlineTemplate  --inlineTemplate  的简写形式。

这个命令的结果是：产生了parent1.component.ts这个文件，还有parent1.component.spec.ts这个单元测试文件。并在appmodule.ts中增加了组件声明。

注意，不管输入的组件名是大写开头，还是小写开头，生成的文件名，都是小写开头，生成的类都是大写开头。

最后再app.commponent.html中增加<app-parent1></app-parent1>，则页面可以看到这个组件了。

export class Parent1Component implements OnInit {
  name: string = "gaofeng"
  constructor() { }

  ngOnInit() {
    this.name = "yangyang" // 会覆盖变量的初始值
  }
}

在parent1这个组件下再增加一个子组件，可以定义一个类Hello

export class Child1Component implements OnInit {
  hello: string;
  constructor() { }

  ngOnInit() {
    this.hello = new Hello().sayHello('gaofeng')
  }

}
class Hello{
  sayHello(name: string): string {
    return 'hello,'+name;
  }
}

例子4  服务

G:\gaofeng\angular\app10\src\app\common> ng g s Util
installing service
  create src\app\common\util.service.spec.ts
  create src\app\common\util.service.ts
  WARNING Service is generated but not provided, it must be provided to be used
创建一个名字叫Util的服务，其实就是定义了一个可注入的类。
和前面自己手工创建的Hello类相比，只是多了一个@Injectable()
@Injectable()
export class UtilService {

  sayHello(name: string): string {
    return 'hello,'+name;
  }

}
这个服务类需要在src\app\app.module.ts的provided中声明如下
providers: [ UtilService ],

然后child1.commponent.ts中就可以注入它了：
import { Component, OnInit, Inject } from '@angular/core';
import { UtilService } from '../../common/util.service';

@Component({
  selector: 'app-child1',
  template: `
    <p>
     [ {{ hello }} ] child1 Works!
    </p>
  `,
  styles: []
})
export class Child1Component implements OnInit {
  hello: string;
  constructor(private util: UtilService) { }//注意，这里必须要写private或public，否则IDE有错误提示

  ngOnInit() {
    this.hello = new Hello().sayHello('gaofeng')
    this.hello = this.util.sayHello('gaofeng222')
  }

}
class Hello{
  sayHello(name: string): string {
    return 'hello,'+name;
  }
}

例子5 父子组件通信

1、在html中调用子组件的方法，变量
<app-child1 #child1> </app-child1>
<button (click)="child1.greeting('Jerry')">调用child2的greeting方法</button>

2、在ts中调用子组件的方法
@ViewChild(HeaderComponent)
private header1:HeaderComponent;