Angualr

一、目录结构

“assets”: [ 存放静态资源目录 “src/favicon.ico”,“src/assets”]

“index”: “src/index.html”, 单页面，打包编译结果出口

“main”: “src/main.ts”, 整个模块化系统启动的入口，其作用为：加载根模块，启动执行模块系统，为整个系统的程序入口。

package.json：项目包说明文件，文件中有scripts字段，左边是简易命令，右边是等效的执行程序，即在终端输入 npm run start 和 ng serve均会执行编译程序：

 "scripts": {   "ng": "ng", 运行查看Angular CLI脚手架工具使用帮助   "start": "ng serve", 运行开发模式    "build": "ng build", 运行项目打包构建（用于发布到生成环境）  "test": "ng test", 运行karma单元测试    "lint": "ng lint", 运行TypeScripts代码校验   "e2e": "ng e2e", 运行protractor端到端测试  "npm run pc:start": 启动pc-fe项目}

二、组件

Component（组件）是整个框架的核心 ，“组件化”的可以用来解耦、复用。

app.component.ts就是一个组件，在Angular中组件就是一个类 。

• @Component为组件的装饰器，用来修饰组件的一些特性，里面包含组件的元数据Metadata；

• selector 用来定义组件的名字

• templateUrl用来指定组件对应的html模板文件

• styleUrls用来存放css文件

• styleUrls是一个数组，用来存放组件相关的样式文件

  组件方法中，直接通过this访问组件成员
  

创建组件的方法：

ng generate component 组件名

三、模块

NgModule（模块）是组织业务代码的利器，按照自己的业务场景，把组件、服务、路由打包到模块里面，形成一个个的积木块，然后用这些积木块来搭建出高楼大厦，app.module.ts就是模块文件，里面是这样的：

• exports: [RouterModule] 导出RouterModule，以便它在整个应用程序中生效。
• declarations：声明并组装模块资源：组件、指令、服务；该应用所拥有的组件。 声明这里面有什么
• imports：app模块需要依赖其他的模块，如BrowserModule等；
• bootstrap：指定启动的根组件；
• providers：各种服务提供者。

四、元数据

@Component被称为元数据，用于描述类相关的功能模块和组件的一些信息

五、数据绑定和指令

MVVM思想（数据驱动视图），通过特殊的{{}}语法将数据绑定到DOM元素，当数据改变的时候会影响视图的更新。

循环指令：*ngFor

条件判断指令：*ngIf

表单控件双向绑定指令：[(ngModel)]，需要导入

import { FormsModule } from '@angular/forms';
imports:[ FormsModule]

六、服务

服务指的是针对某个单一或系统功能的封装，包括值、函数或应用所需的功能，例如在Angular核心包里面，最典型的一个服务就是http服务。典型的服务是一个类，具有专注的、明确的用途，应该做一件特定的事情，并把它做好。例如，日志服务，和服务端接口交互的服务等

七、依赖注入

依赖注入是提供类的新实例的一种方式，负责处理好类所需的全部依赖。大多数依赖都是服务。Angular使用依赖注入来提供新组件以及组件所需的服务。Angular重要的特性和服务：动画、表单、HTTP、组件生命周期、管道过滤器、路由和测试。

Ng Docs

一、常规用法：

1插值表达式

 <p>{{byObject.centence}}</p><p>{{byArray[0]}}</p>

 byObject = { centence: '我是对象的值' };byArray = ['我是数组的0号元素'];

2绑定机制

• 属性-从数据源到视图(单向) 插值表达式 []
• 事件-从视图到数据源(单向) ()
• 表单值-从视图到数据源再到视图(双向) [()]

<span [ngClass]="className">
<!-- 这里的ngClass等同于 class="{{className}}" -->
<some-element [ngClass]="['first', 'second']">...</some-element><some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element><some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<div><p>案例1:使用模版引用变量(脱离数据源)</p><input style="width: 125px" nz-input #age placeholder="请输入你的年纪" /><button (click)="showMsg(age.value)" nz-button nzType="primary">弹出模板引用变量的内容</button>
</div>

input输入框输入值，age将input框进行标记，button通过点击函数取到age.value即input框内的值

<div><p>案例4:既有单向绑定又有双向绑定</p><input style="width: 125px" nz-input [(ngModel)]="centence"/><button (click)="showMsg(centence)" nz-button nzType="primary">弹出双向绑定的内容</button>
</div>

[(ngModel)]进行数据双向绑定，input框中的值会传给contence，button键点击触发showMsg函数，此时展示的值是经过变化后的contence

可选链：

意义：有就用，没有就不用

例子：

我是{{user.name}}, 我的房子所在地为{{user.house?.location}}

没有就显示：我是谁谁谁，我的房子所在地为

有就显示：我是谁谁谁，我的房子所在地为上海大别墅

二、指令

ng-content

父传子，将父类html嵌入到子类中，就是父类html中有一段代码需要动态生成，相当于vue中的插槽slot。

父组件:

<h1>父组件</h1>
<input [(ngModel)]="sentence" name="sentence" class="sentence">
<stomach><div>{{sentence}}</div><p>所谓的不公，只是不符合人类社会法则</p><span class="className">却符合因果关系</span>
</stomach>

子组件：

<h1>子组件</h1>
<!--ng-content父类嵌入子类-->
<ng-content select="p"></ng-content>
<ng-content select="span"></ng-content>
<ng-content></content>
<ng-content select="p"></ng-content>

ng-container

ng-container只是一个分组元素, 它的特点就是在渲染页面时, 自身不加入DOM.你可以使用浏览器的开发者工具, 查看运行结果中的这句话, 是否只有p标签包围.

 <ng-container><p>轻流招聘啦~详情请戳https://github.com/Eve-Sama</p></ng-container><ng-container><p>自身不加入dom，只是分组元素</p></ng-container>

ng-template

ng-template是Angular 结构型指令中的一种，用于定义模板渲染HTML(模板加载)。定义的模板不会直接显示出来，需要通过其他结构型指令（如 ng-if）或 template-ref 将模块内容渲染到页面中。

今天吃点啥？
<ng-template [ngIf]="true">吮指原味鸡
</ng-template>

概述

一共有三种类型的指令：

• 组件-拥有模板的指令
• 结构型指令-通过添加和移除 DOM 元素改变 DOM 布局的指令
• 属性型指令-改变元素、组件或其他指令的外观和行为的指令

结构性指令

以*开头，如*ngIf，*ngFor，否则为属性型指令，如ngClass，ngStyle等

*ngFor中有以下几种模板变量：

• index: number:遍历时的序号, 下标从0开始
• first: boolean:若为第一个元素则返回true, 否则返回false
• last: boolean:若为最后一个元素则返回true, 否则返回false
• even: boolean:若为偶数元素则返回true, 否则返回false
• odd: boolean:若为奇数元素则返回true, 否则返回false

<table><thead><tr><th>序号</th><th>姓名</th><th>籍贯</th><th>第一条记录</th><th>最后一条记录</th><th>偶数记录</th><th>奇数记录</th></tr></thead><tbody><tr *ngFor="let obj of ngForData;let index = index;let first = first;let last = last;let even = even;let odd = odd;"><td>{{index}}</td><td>{{obj.name}}</td><td>{{obj.gender}}</td><td>{{obj.hometown}}</td><td [ngClass]="{'high-light-true':first,'high-light-false':!first}">{{first}}</td><td [ngClass]="{'high-light-true':last,'high-light-false':!last}">{{last}}</td><td [ngClass]="{'high-light-true':even,'high-light-false':!even}">{{even}}</td><td [ngClass]="{'high-light-true':odd,'high-light-false':!odd}">{{odd}}</td></tr></tbody>
</table>

trackBy

Angular默认是以对象为标记的, 一旦你更新数据源, Angular便更新视图.更新时, 先移除全部DOM结点, 再依次添加DOM结点.DOM的操作非常消耗性能, 因此, *ngFor提供 trackBy来帮助用户自定义追踪函数算法.

就是用*ngFor循环更新遍历数据时，更新整个dom树，但有时候我们只是需要更新一小部分内容，那么此时我们利用trackby进行数据追踪，就可以提高效率。

<ul><Li *ngFor="let obj of cities; trackBy:trackByCity">{{obj.name}}</Li>
</ul>
<button (click)="UpdateCities()" nz-button>获取数据</button>
<button (click)="ResetCities()" nz-button>还原数据</button>

自定义结构型指令

• 导入并添加Directive装饰器
• 导入input，TemplateRef，ViewContainRef
• 设置选择器，以便Angualr解析指令
• 在AppModule的declarations中声明

关于自定义结构型指令需要预先了解以下三个概念:
**TemplateRef:**表示内嵌的HTML模板.
**ViewContainerRef:**表示视图容器, 创建和管理内嵌视图.

**依赖注入：**将控制权交给了父组件

    //1import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';import {Directive,Input,TemplateRef}//2@Directive({selector: '[nssMilkTeaType]'})export class NssMilkTeaDirective {//3constructor(private templateRef: TemplateRef<any>,private viewContainer: ViewContainerRef) {}//设置type方法，里面的type是它的一个string属性@Input('nssMilkTeaType') set type(type: string) {if (type === 'oreo') {this.viewContainer.clear();//清除所有内嵌视图this.viewContainer.createEmbeddedView(this.templateRef);//创建内嵌视图} else if (type === 'redBean') {this.viewContainer.clear();this.viewContainer.createEmbeddedView(this.templateRef);this.viewContainer.createEmbeddedView(this.templateRef);} else if (type === 'matcha') {this.viewContainer.clear();this.viewContainer.createEmbeddedView(this.templateRef);this.viewContainer.createEmbeddedView(this.templateRef);this.viewContainer.createEmbeddedView(this.templateRef);}}}

属性型指令

ngClass：

相当于css中的class选择器

ngStyle：

相当于直接在里面写样式

ngSwitch：

ngSwitch设定了一个参数变量, 当参数变量与 *ngSwitchCase的值一致时, 显示其DOM元素, 否则移除.当所有 *ngSwitchCase都无法匹配时, 则显示 *ngSwitchDefault的DOM元素

<nz-radio-group [(ngModel)]="hobby"><label nz-radio nzValue="sweet">我喜欢吃甜的</label><label nz-radio nzValue="salty">我喜欢吃咸的</label><label nz-radio nzValue="yummy">只要好吃就行</label>
</nz-radio-group>
<div [ngSwitch]="bobby"><p>生活就需要甜甜的味道!</p><p>咸一点的食物才叫美食,其他的只能叫吃的!</p><p>只要是好吃的我都喜欢!</p>
</div>

自定义属性型指令

• 导入并添加 Directive装饰器
• 导入 Input, ElementRef
• 设置选择器, 以便Angular解析指令
• 在AppModule的 declarations 中声明

三、路由

router-outlet

侧边栏和顶部导航栏是不变的, 只有内容区是在变化的.如本项目, 左侧菜单好像是固定在那边的, 右边内容区却是会变化的.这是如何实现的呢?

实际上, 右边就是个 router-outlet, 字面意思是路由出口, 告诉路由模块, 需要加载的页面需要放在哪个地方.

routerLink

路由的跳转, 很多时候是由用户在应用界面上的操作导致的, 那么当用户需要跳转页面的时候, 需要加上跳转链接.在以前, 我们可能是这样写的

   <a href="../project/author">关于作者</a>//a标签中的href变成routerlink<a routerLink="/project/author">关于作者</a>

Routes数据结构

import { Routes } from '@angualr/router';
const routes: Routes = [{path: 'demo1',component:Demo1Component },{path: 'demo2',component:Demo2Component },//默认导航路径. {path: '',   redirectTo: '/demo1', pathMatch: 'full' },{path: '**', component: PageNotFoundComponent }
]

• path - 路径, 用来匹配路由的名字 ,’**'是指任何路径都可以匹配到的路径, 通常用来放置404页面, 比如用户恶意修改路径, 但实际上并没有对应的路径.
• component - 组件名, 对应路径指向的组件名
• redirectTo - 重定向指向的路径, 当匹配到这个路径时转发请求给重定向的路径
• pathMatch - 路径匹配模式

**pathMatch:**通常设置为 full.其值还有一种可能是 prefix, 是指前缀匹配.思考一下, 当 path 值为 ‘’ 时, 为什么必须指明 pathMatch为 full?观察以下URL.

angular.ink
angular.ink/demo1

这三个URL都是以 angular.ink开头的, 这个是根域名, 那么三个都可以匹配到, 所以, 默认路径必须是 full的匹配模式.

异步路由

就是假如登录模块有两个身份界面，一个是admin，一个是user，那么当admin访问时就不需要加载user，当user访问时不需要加载admin，这就是异步路由，这样可以大大提高加载速度。

例如一个线上超市系统：

apppagespages-routing.module.tsuserbrowse-productbrowse-product.component.tsbuy-productbuy-product.component.tsuser-router.module.tsuser.module.tsadminmanage-productmanage-product.component.tsoperator-recordoperator-record.component.tsadmin-router.module.tsadmin.module.ts 

pages：

• pages-routing.module.ts - 总的模块路由

• user-router.module.ts(admin-router.module.ts) - 具体模块路由, 决定哪些路径能够匹配到user(admin)的哪些页面

• user.module.ts(admin.module.ts) - 模块声明, 组件、管道、服务等需要在此声明, 才可以被此模块使用

  user-router.module.ts

import {NgModule} from '@angualr/core';
import {Routes,RouterModule} from '@angualr/router';
import {BrowseProductComponent} from './browse-product/browse-product.component';
import { BuyProductComponent } from './buy-product/buy-product.component';const routes:Routes = [{path: 'browse-product',component: BrowseProductComponent},{path: 'buy-product',component: BuyProductComponent}
];@NgModule({imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})export class UserRoutingModule{}

user.module.ts

import {NgModule} from '@angular/core';
import {Routes,RouterModule} from '@angualr/router';
import {BrowseProductComponent} from './browse-product/browse-product.component';@NgModule({imports: [UserRoutingModule,],declaration:[BrowseProductComponent,BuyProductComponent]
})
export class UserModule{}

admin-router.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ManageProductComponent } from './manage-product/manage-product.component';
import { OperatorRecordComponent } from './operator-record/operator-record.component';const routes:Routes = [{path: 'manage-product',component:ManageProductComponent },{path: 'operator-record',component:OperatorRecordComponent}
];@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})export class AdminRoutingModule{}

admin.module.ts

import { NgModule } from '@angular/core';
import { AdminRoutingModule } from './angular-routing.module';
import { ManageProductComponent } from './manage-product/manage-product.component';
import { OperatorRecordComponent } from './operator-record/operator-record.component';@NgModule({imports:[AdminRoutingModule,]declarations:[ManageProductComponent,OperatorRecordComponent]
})
export class AdminModule { }

pages-routing.module.ts

  import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';const routes: Routes = [{path: '',children: [{ path: '', redirectTo: '/user/browse-product', pathMatch: 'full' },{ path: 'user', loadChildren: './user/user.module#UserModule' },{ path: 'admin', loadChildren: './admin/admin.module#AdminModule' },{ path: '**', redirectTo: '/user/browse-product' },],}];@NgModule({imports: [RouterModule.forRoot(routes, { useHash: false })],exports: [RouterModule],})export class PagesRoutingModule {}

路由传参

原页面：

<button (click)="navigate()">携转跳转</button>navigate(){this.router.navigate(['/angualr/params-router'],{queryParams:{name:'前夕'，words：‘最美的是相逢，最难的是重逢’}})
}

跳转后的：

<div class="center"><h1>{{name}}</h1><h2>{{words}}<h2>
</div>
activatedRoute.queryParams.subscribe(queryParams =>{this.name = queryParams.name;this.words = queryParams.words;
})

CanActivate

很多时候, 并不是所有人都可以访问所有页面的.最典型的应用场景是普通用户并不能访问管理员的操作页面.那么我们就需要在用户访问时判断这个用户到底是否有相应的权限.路由配置文件提供了一个接口 CanActivate用来处理验证的业务.有时候这些安全措施也被称为路由守卫.

{ path: 'params-router-true', component: ParamsRouterComponent, canActivate: [AuthGuardTrue] },

CanDeactivate

在一些表单编辑页面, 如果用户辛辛苦苦输入了半天, 却不小心点到导航按钮, 跳转到了其他页面, 丢失了未保存的数据, 这样的用户体验是非常糟糕的.所以, Angular提供了 CanDeactivate接口, 在跳转路由之前触发, 以提醒用户, 或者做一些业务上的保存等操作.

CanActivateChild则用来保护子路由. CanLoad则是用来保护子模块的, 未经允许, 不加载子模块.

预加载

我们知道, 使用异步路由后, 各自的路由模块只有在初次访问时才会加载.而实际上, 在页面初次加载后, 进入默认路由模块, 用户通常需要停留一会, 这个时候继续加载其他模块是比较合适的, 这样做有两个非常显著的好处.

• 初次加载并没有加载默认路由模块, 提高加载速度
• 当用户访问其他模块时, 不会出现卡顿, 因为已经预加载了

只需要在模块配置处添加以下代码即可

@NgModule({imports: [RouterModule.forRoot(routes,{useHash:false,preloadingStategy:PreloadAllModules //开启预加载})],exports:[RouterModule],
})

四、服务

一般用于写获取数据的业务逻辑

• 组件级注册, 在 @Component当中的 providers数组当中引入服务
• 模块级注册, 在 @ngModule当中的 providers数组当中引入服务

当组件需要使用服务时, 都需要将服务引入组件内并在构造函数中声明.

组件级注册：

import { XxxService } from './xxx.service';
//组件之间相互独立
@Component({providers: [XxxService]
})

模块级注册：

import { XxxService } from './xxx.service';
//组件之间数据共享
@NgModule({providers:[XxxService]
})

基础用法：

在概述当中, 我们提到了服务的应用场景, 那么, 我们现在来实现这样一个登录功能.

• 设计一份表单来采集账号和密码, 点击登录后验证用户身份
• 当帐号为’admin’, 密码为’123456’时, 登录成功, 否则登录失败

<input nz-input #userName name="userName" placeholder="用户名,默认admin">
<input nz-input #password name="password" placeholder="密码,默认123456">
<button (click)="login(userName.value,password.value)" nz-button nzType="primary">登录</button>

import {Injectable} from '@angular/core';
@Injectable()
export class LoginService{login(userName: string, password: string): boolean {if (userName === 'admin' && password === '123456') {return true;}return false;}
}

    import { Component } from '@angular/core';import { LoginService } from './service/demo.service';import { NzMessageService } from 'ng-zorro-antd/message';@Component({templateUrl: './service.component.html',styleUrls: ['./service.component.scss'],providers: [LoginService]})export class ServiceComponent {constructor(private loginService: LoginService) { }login(userName, password) {if (this.loginService.login(userName, password)) {this.nzMessageService.info('登录成功!');} else {this.nzMessageService.error('登录失败!');}}}

组件级注册提供商

组件级注册最大的作用就是组件之间的数据不会相互影响。

举个栗子：

• 设计一个服务, 服务内部有一个字段初始值为0, 定义一个方法, 可以自增这个字段并且弹出显示(alert, 在案例中使用的antd样式)
• 设计父子组件, 在父子组件中均注册这个服务并且调用这个服务的方法.但是各自的数据互不影响

import { Injectable } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';@Injectable()
export class ComponentService{constructor(private nzMessageService: NzMessageService){}value = 0;add(){this.value++;this.nzMessageService.info(this.value.toString());}
}

<h1>父组件</h1>
<button (click)="addAndShowComponent"  nz-button nzType="primary">自增且显示</button>
<component-child></component-child>

父组件ts

  import { Component } from '@angular/core';import { ComponentService } from './service/demo.service';@Component({templateUrl: './service.component.html',styleUrls: ['./service.component.scss'],providers: [ComponentService]})export class ServiceComponent{constructor(private componentService:ComponentService{})addAndShowComponent(){this.componentService.add();}}

子组件html

<h1>子组件</h1>
<span><button (click)="addAndShow()" nz-button nzType="primary">自增且显示</button>
</span>

子组件ts

   import { Component } from '@angular/core';import { ComponentService } from '../../service/demo.service';@Component({selector: 'component-child',templateUrl: './component-child.component.html',styleUrls: ['./component-child.component.scss'],providers: [ComponentService]})export class ComponentChildComponent {constructor(private componentService: ComponentService) { }addAndShow() {this.componentService.add();}}

模块级注册提供商

和组件级注册相反，模块级注册要求服务内部之间共享数据

//服务
import { Injectable } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';@Injectable()
export class RootService{constructor(private nzMessageService:NzMessageService){}value = 0;add(){this.value++;this.nzMessageService.info(this.value.toString());}
}

//服务注册,写在根组件内
import { RootService } from './service/service/demo.service';@NgModule({providers:[RootService]
})export class AngualrModule{}//这是我的模块名

//父组件样式
<h1>父组件</h1>
<button (click)="addAndShowRoot()" nz-button nzType="primary">自增且显示</button>
<service-child></service-child>

   //父组件tsimport { Component } from '@angular/core';import { RootService } from './service/demo.service';@Component({templateUrl: './service.component.html',styleUrls: ['./service.component.scss']})export class ServiceComponent {constructor(private rootService: RootService) { }addAndShowRoot() {this.rootService.add();}}

    //子组件html<h1>子组件</h1><span><button (click)="addAndShow()" nz-button nzType="primary">自增且显示</button></span>

   //子组件tsimport { Component } from '@angular/core';import { RootService } from '../../service/demo.service';@Component({selector: 'service-child',templateUrl: './service-child.component.html',styleUrls: ['./service-child.component.scss']})export class ServiceChildComponent {constructor(private rootService: RootService) { }addAndShow() {this.rootService.add();}}

五、组件

父组件调用子组件方法

父组件需要调用子组件的方法, 这里分为两种调用方式, 一种是 实例调用, 一种是 类调用. 。

这里需要使用 ViewChild将子组件注入到父组件的数据源. ViewChild相当于影分身，可以拥有原先子组件的属性和方法.在 类调用 的案例中, child-communication的标签即使不写, 也可以调用子组件的方法

类调用

在这个案例中, 子组件有个输入框, 点击子组件的按钮可以正常弹出值.但是点击父类, 也能弹出信息, 但是却无值, 这是为什么?
这是因为在父组件的数据源中, 对子组件的引用使用的是 类调用, 即参数都是子组件的类名. Angular只能知道你有这个子组件, 但是无法定位你子组件所在的位置, 是不是这个道理?所以自然无法取得子组件的动态成员变量.

父组件html

<h1>我是父组件</h1>
<button (click)="callChildFunction2()" nz-button nzType="primary">调用子组件方法</button>
<child-communication></child-communication>

父组件ts

@ViewChild(ChildCommunicationComponent) private childComponent: ChildCommunicationComponent;
callChildFunction2(){this.childComponent.childFunction2();
}

子组件html

<h1>我是子组件</h1>
<input nz-input class="input" [(ngModel)]="childValue2" name="childValue2" placeholder="子组件的输入框">
<button (click)="childFunction2()" nz-button nzType="primary">调用方法</button>

子组件ts

childValue2;
childFunction2(){this.messageService.info(this.childValue2);
}

实例调用

给子组件加上模板引用变量确定子组件在dom树中的位置

<h1>我是父组件</h1>
<button (click)="callChildFunction3()" nz-button nzType="primary">调用子组件方法</button>
<child-communication #child></child-communication>

 @ViewChild('child') private childComponent2: ChildCommunicationComponent;callChildFunction3() {this.childComponent2.childFunction3();}

子组件给父组件传值

在父组件传值给子组件的时候, 其实是通过指令的方式完成的.但是使用指令的前提, 是被传值者是一个标签, 这符合了父组件传值给子组件的条件.
但是子组件显然不可能包含父组件的标签, 所以并不能通过这种方式完成传值.在开始演示之前, 先了解以下几个概念:

1. output用于外部访问, 也就是说, 将其暴露给外部, 允许外部使用
2. EventEmitter是Angular的事件发射器, 暂时理解为事件的一个大类

观察代码和运行结果, 可以看到, 子组件中, 在点击按钮后, 触发点击事件, 调用 childFunction4()方法, 在这个方法中, 使用事件发射器 this.event.emit()触发事件, 将值(案例中弹的是一个对象)弹出.

<h1>我是父组件</h1>
<input nz-input class="input" [(ngModel)]="name" placeholder="姓名">
<input nz-input class="input" [(ngModel)]="bornYear" placeholder="出生年月">
<child-communication (event)="showInfo($event)"></child-communication>

//父组件ts
name;
bornYear;
showInfo($event) {this.name = $event.name;this.bornYear = $event.bornYear;
}

<h1>我是子组件</h1>
<input nz-input class="input" [(ngModel)]="name" name="name" placeholder="姓名">
<input nz-input class="input" [(ngModel)]="bornYear" name="bornYear" placeholder="出生年月">
<button (click)="childFunction4()" nz-button nzType="primary">传值给父组件</button>

每一个Subject都是一个Observable（可观察对象），对于一个Subject，你可以订阅（subscribe）它，Observer会和往常一样接收到数据，

每一个Subject也可以作为Observer（观察者） Subject同样也是一个由next(v)，error(e)，和 complete()这些方法组成的对象。调用next(theValue)方法后，Subject会向所有已经在其上注册的Observer多路推送theValue。

service

import {Injectable} from '@angualr/core';
import {Subject} from 'rxjs';
@Injectable()
export class CommunicationService{// 声明两个Subject并定义接收数据类型,在本案例中是一个对象private father = new Subject<{drink,eat}>();private child = new Subject<{drink,eat}>();// 将Subject转化为Observablefather$ = this.father.asObservable();child$ = this.child.asObservable();//将变化的值，，发送给订阅者fatherSend(value: {drink,eat}){this.father.next(value);}childSend(value: {drink,eat}){this.child.next(value);}
}

父组件html

 <h1>父组件</h1><input nz-input class="input" [(ngModel)]="drink" name="drink" placeholder="最爱喝的饮料"><input nz-input class="input" [(ngModel)]="eat" name="eat" placeholder="最爱吃的甜点"><button (click)="transferDataByService()" nz-button nzType="primary">传值给子组件</button><child-communication></child-communication>

父组件ts

    import { CommunicationService } from './service/communication.service';import { Subscription } from 'rxjs';@Component({templateUrl: './component-communication.component.html',styleUrls: ['./component-communication.component.scss'],providers: [CommunicationService]})export class ComponentCommunicationComponent implements OnDestroy {subscription: Subscription;constructor(private communicationService: CommunicationService) {this.subscription = communicationService.child$.subscribe(value => {this.drink = value.drink;this.eat = value.eat;});}drink = '奶茶';eat = '泡芙';transferDataByService() {this.communicationService.fatherSend({ drink: this.drink, eat: this.eat });}ngOnDestroy() {this.subscription.unsubscribe();}}

子组件html

 <h1>子组件</h1><input nz-input class="input" [(ngModel)]="drink" name="drink" placeholder="最爱喝的饮料"><input nz-input class="input" [(ngModel)]="eat" name="eat" placeholder="最爱吃的甜点"><button (click)="transferDataByService()" nz-button nzType="primary">传值给父组件</button>

子组件ts

    import { Subscription } from 'rxjs';@Component({selector: 'child-communication',templateUrl: './child-communication.component.html',styleUrls: ['./child-communication.component.scss']})export class ChildCommunicationComponent implements OnDestroy {subscription: Subscription;constructor(private communicationService: CommunicationService) {this.subscription = communicationService.father$.subscribe(value => {this.drink = value.drink;this.eat = value.eat;});}drink;eat;transferDataByService() {this.communicationService.childSend({ drink: this.drink, eat: this.eat });}ngOnDestroy() {this.subscription.unsubscribe();}}

Service通常有2个作用
一个是网络请求的存放
另外个作用是集中处理业务, 主要是与视图无关的一些处理. 这类Service则按需注入

如果只是子孙的通讯不涉及其他的数据传递，就可以用emit

组件样式

父子组件样式相互不影响

父组件html

<h1>父组件</h1>
<span class="color bgColor">父组件的内容</span>
<child-styles1></child-styles1>

父组件css

.bgColor{background-color:red;
}

子组件html

<h1>子组件</h1>
<span class="color bgColor">子组件的内容</span>

子组件css

.color{color:blue;
}

给子组件添加边界

:host(.selector)

:host, 意味着在整个子组件的根元素上添加样式,selector表示只有子组件根元素上存在这个选择器类名selector的组件才应用这个样式

<h1>父组件</h1>
<child-style2 class="first-element"></child-style2>

:host(.first-element){display:block;border: 1px solid red;
}

刺穿选择器

::ng-deep

当父组件包含子组件时，原则上各自的样式互不污染，非要进行污染时，则使用该选择器

this.drink = value.drink;
this.eat = value.eat;
});
}
drink;
eat;
transferDataByService() {
this.communicationService.childSend({ drink: this.drink, eat: this.eat });
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}

Service通常有2个作用
一个是网络请求的存放
另外个作用是集中处理业务, 主要是与视图无关的一些处理. 这类Service则按需注入如果只是子孙的通讯不涉及其他的数据传递，就可以用emit### 组件样式父子组件样式相互不影响**父组件html**```html
<h1>父组件</h1>
<span class="color bgColor">父组件的内容</span>
<child-styles1></child-styles1>

父组件css

.bgColor{background-color:red;
}

子组件html

<h1>子组件</h1>
<span class="color bgColor">子组件的内容</span>

子组件css

.color{color:blue;
}

给子组件添加边界

:host(.selector)

:host, 意味着在整个子组件的根元素上添加样式,selector表示只有子组件根元素上存在这个选择器类名selector的组件才应用这个样式

<h1>父组件</h1>
<child-style2 class="first-element"></child-style2>

:host(.first-element){display:block;border: 1px solid red;
}

刺穿选择器

::ng-deep

当父组件包含子组件时，原则上各自的样式互不污染，非要进行污染时，则使用该选择器