AngularJS基础知识

angular 1.0 启动命令 live-server

Angular.js

父子间传值和调用方法

父传子 @Input

父组件：

//ionic2
<tab-bar activeIndex="2"></tab-bar>
//ionic3+
<tab-bar [activeIndex]="2"></tab-bar>

子组件：

import {Input} from '@angular/core';
//ionic2
@Input('activeIndex') activeIndex: any
//ionic3+
@Input() activeIndex: any

子传父/调用父组件方法 @OutputEventEmitter

子组件：

import {Output, EventEmitter} from '@angular/core';
@Output() event:EventEmitter<Object> = new EventEmitter<Object>()
this.event.emit(this.text)

父组件：

<tab-bar (event)="father('$event')"></tab-bar>

father(event){
  console.log(event)  //这里event就是子组件传过来的值
}

这里$不能省略，子组件的event名字对应父组件的（event）

父组件调用子组件方法

父组件：

<tab-bar #tabbar></tab-bar>

import { ViewChild } from "@angular/core";
import { TabBarComponent } from '../../../components/tab-bar/tab-bar'

export class FatherComponent implements AfterViewInit{
    @ViewChild("tabbar") tabbar:TabBarComponent
    public something(){
  		this.tabbar.greet('Free')
	}
}

子组件：

greet(name){
    alert(name+'，你好')
  }

NgModule配置和声明

子组件：

@Component({
    //父组件使用  <video-web-control></video-web-control>
    selector: "video-web-control",
    templateUrl: "./videoWebControl.component.html",
    styleUrls: ["./videoWebControl.component.scss"],
})

app.module.ts //多模块项目在对应的模块文件中声明 xx.module.ts

import { CommonModule } from "@angular/common";
import { VideoWebControlComponent } from "./components/videoWebControl.component";
import { VideoService } from "./services/video.service";
@NgModule({
  imports: [
      CommonModule
  ],//用来导入外部模块。
  declarations: [VideoWebControlComponent],//用来放组件、指令、管道的声明
  exports: [],//导出组件/指令管道等，以供引用此模块的模块可以使用此模块的组件/指令管道等。
  providers: [VideoService],//需要使用的 Service 都放在这里。
  entryComponents: [],//entry component 表示 angular 的入口组件，可以引导组件是一个入口组件，Angular 会在引导过程中把它加载到 DOM 中。 其它入口组件是在其它时机动态加载的。字面上的意义，但是啥时候用呢，比如，我要弹出一个组件，那么这个组件是要动态加载到DOM中了吧，这个时候就需要将这个组件xxxComponent写上了。
  bootstrap：[]//定义启动组件。你可能注意到了这个配置项是一个数组，也就是说可以指定做个组件作为启动点，但是这种用法是很罕见的。
})

生命周期

所有钩子

生命周期函数	作用
ngOnChanges()	初始化输入属性 ，Angular（重新）设置数据绑定输入属性时的响应。该方法接收 SimpleChanges 当前和先前属性值的对象。ngOnInit() 在一个或多个数据绑定输入属性发生更改 之前和之后调用。
ngOnInit()	初始化其他属性，在 Angular 首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。在第一次之后 调用一次 ngOnChanges() 。
ngDoCheck()	初始化其他属性，在 Angular 首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。在第一次之后 调用一次 ngOnChanges() 。
ngAfterContentInit()	投影内容初始化，在 Angular 将外部内容投影到组件的视图/指令所在的视图后进行响应。在第一次之后 调用一次 ngDoCheck()。if you want to change the child component’s props, you cannot do it in ‘ngAfterViewInit’, you need to do it in ‘ngAfterContentInit’
ngAfterContentChecked()	针对投影内容的变更检测在 Angular 检查投射到指令/组件中的内容后响应。在 ngAfterContentInit() 随后和随后的每一次调用之后 ngDoCheck()。
ngAfterViewInit()	初始化完组件视图及其子视图之后调用 ，在 Angular 初始化组件的视图和子视图/指令所在的视图后响应。在第一次之后 调用一次 ngAfterContentChecked()。一般进行 DOM 操作
ngAfterViewChecked()	每次做完组件视图和子视图的变更检测之后调用，在 Angular 检查组件的视图和子视图/指令所在的视图后响应。在 ngAfterViewInit() 随后和随后的每一次调用之后 ngAfterContentChecked()。
ngOnDestroy()	当Angular每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏，就在 Angular 破坏指令/组件之前进行清理。取消订阅 Observable 并分离事件处理程序以避免内存泄漏。在 Angular 破坏指令/组件之前 调用。组件销毁时执行

调用顺序

ngOnChanges - 当数据绑定输入属性的值发生变化时调用
ngOnInit - 在第一次 ngOnChanges 后调用
ngDoCheck - 自定义的方法，用于检测和处理值的改变
ngAfterContentInit - 在组件内容初始化之后调用
ngAfterContentChecked - 组件每次检查内容时调用
ngAfterViewInit - 组件相应的视图初始化之后调用 常用 类似于vue中mounted(){}
ngAfterViewChecked - 组件每次检查视图时调用
ngOnDestroy - 指令销毁前调用 常用 类似于vue中destroyed(){}

路由 router

传参

查询参数中传递数据

传值

<a [routerLink]="['/tab4']" [queryParams]="{id:3}" >tab4</a>

取值

import {ActivatedRoute} from '@angular/router';
constructor(private routerinfo:ActivatedRoute) { }
this.routerinfo.snapshot.queryParams["id"]

路由路径（url）中传递参数

路由配置

{path: 'tab4/:name',component:Tab4Component}

传值

<a [routerLink]="['/tab4','我是url传递参数']" [queryParams]="{id:3}" >tab4</a>

取值

this.routerinfo.snapshot.params['id']

service 订阅 不同组件间实时传递数据

数据改变

import { LineStoreService } from "../services/line.sevice";
constructor(
        protected lineStoreService: LineStoreService
    ){}
this.lineStoreService.toggleLine.next(line);

订阅服务

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

/**
 * task服务：负责页面间的消息传递
 */
@Injectable()
export class LineStoreService {
    public toggleLine = new Subject<any>();
}

订阅

import { LineStoreService } from "../services/line.sevice";


public subscription : Subscription;
constructor(
        protected lineStoreService: LineStoreService
    ){}
    this.subscription = this.lineStoreService.toggleLine.subscribe((data)=>{
            console.log("toggle line-----", data);
        });

取消订阅

this.subscription.unsubscribe()

Zorro表格固定表头右侧白块

.ant-table-header {
        overflow: hidden !important;
    }