angular知识分享

一、环境搭建

1、安装angular脚手架

npm install -g @angular/cli 或者 cnpm install -g @angular/cli

提示：cmd输入ng v 查看angular 安装版本

2、创建项目

ng new 项目名称

3、启动项目

ng service -- open

4、angular-cli文件

e2e————————————————在e2e是端到端测试

node_modoules—————————— 安装的第三方模块都放在这里

src—————————————————项目文件都存放在src里面

app—————————————————组件

assets————————————————静态资源

environments—————————————各个目标环境准备的问题

index.html———————————————启动页

main.ts—————————————————入口文件

polyfills.ts————————————————填充库能帮我们把这些不同点进行标准化

style.css—————————————————全局样式

test.ts——————————————————单元测试入口

tsconfig.app.json—————————————typeScript编辑器配置文件

tsconfig.spec.json—————————————typeScript编辑器配置文件

angular.json————————————————cli核心配置文件

package.json————————————————npm配置文件

 二、语法结构

1、组件

新建组件：

        ng generate component 组件名称

新建组件内容

      @Component({  装饰器

                selector: 'app-component-overview',  组件名称

                templateUrl: './component-overview.component.html', 组件页面

                styleUrls: ['./component-overview.component.css'] 组件css样式

        })

组件的生命周期：

        当 Angular 实例化组件类并渲染组件视图及其子视图时，组件实例的生命周期就开始了。

响应生命周期事件

        ngOnChanges(changes: SimpleChanges)：当 Angular 设置或重新设置数据绑定的输入属性时响应。  提示：SimpleChanges 该对象中有属性的当前值和前一个值

        ngOnInit()：在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。

        ngDoCheck()：检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。

        ngAfterContentInit()：当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。

        ngAfterContentChecked()：每当 Angular 检查完被投影到组件或指令中的内容之后调用。

        ngAfterViewInit()：当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。

        ngAfterViewChecked()：每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。

        ngOnDestroy()： 每当 Angular 每次销毁指令/组件之前调用并清扫。

2、视图包装

        ViewEncapsulation.ShadowDom: Angular 使用浏览器内置的 Shadow DOM API将组件的视图包含在 ShadowRoot（用作组件的宿主元素）中，并以隔离的方式应用所提供的样式。

        ViewEncapsulation.Emulated: Angular 会修改组件的 CSS 选择器，使它们只应用于组件的视图，不影响应用程序中的其他元素。

        ViewEncapsulation.none: Angular 不应用任何形式的视图封装，这意味着为组件指定的任何样式实际上都是全局应用的，并且可以影响应用程序中存在的任何 HTML 元素。

3、组件交互

        通过输入型绑定把数据从父组件传到子组件

                子组件：

                        @Input() hero!: Hero;

                        @Input('master') masterName;

                父组件:

                        [hero]="hero"

                        [master]="master"

        通过 setter 截听输入属性值的变化

                @Input()

                        get name(): string { return this._name; }

                        set name(name: string) { this._name = (name && name.trim())}                         private _name = '';

        通过ngOnChanges()来截听输入属性值的变化

                @Input() major = 0;

                @Input() minor = 0;

                ngOnChanges(changes: SimpleChanges)  {

                        changes:所有数据存在此对象中或可从 变量中获取

                }

        父组件监听子组件的事件

        子组件暴露一个 EventEmitter属性，当事件发生时，子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。

    @Output() voted = new EventEmitter<boolean>();

   this.voted.emit(agreed); emits 向上弹射到父组件 

   父组件 VoteTakerComponent绑定了一个事件处理器(onVoted())，用来响应子组件的事件($event)并更新一个计数器。       (voted)="onVoted($event)"

        onVoted(agreed: boolean) {

                触发此事件，将返回值通过参数传回，需传多参时，可用对象形式传回

        }

        父组件与子组件通过本地变量交互

                父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法。

        子组件方法：

                start() {}

                stop() {}

        父组件访问子组件方法：

                <button (click)="timer.start()">Start</button>  通过变量调用方法和方法

                <button (click)="timer.stop()">Stop</button>

                <div class="seconds">{{timer.seconds}}</div> 

                <app-countdown-timer #timer></app-countdown-timer>  #timer新建本地变量

          父组件调用@ViewChild()

                本地变量方法是个简单明了的方法。但是它也有局限性，因为父组件-子组件的连接必须全部在父组件的模板中进行。父组件本身的代码对子组件没有访问权。

                @ViewChild(CountdownTimerComponent)  子组件名称

                private timerComponent!: CountdownTimerComponent;

                start() { this.timerComponent.start(); }  访问子组件方法

                stop() { this.timerComponent.stop(); }

            父组件和子组件通过服务来通讯

                父组件和它的子组件共享同一个服务，利用该服务在组件家族内部实现双向通讯。

                confirmMission(astronaut: string) { } service服务中封装方法，父子组件可通过注入service服务来调用方法实现数据共享