view钩子
- 生成一个子组件，在子组件中定义一个方法greeting
export class ChildComponent implements OnInit {
constructor() { }
ngOnInit() {
}
greeting(name:string){
console.log("Hello"+name);
}
}
- 在主组件中写两个app-child标签，分别给它们指定一个模板本地变量child1,child2
<app-child #child1></app-child>
<app-child #child2></app-child>
- 在父组件的ts中调用子组件的方法 ，在父组件中声明一个由@ViewChild装饰器装饰的变量，属性指定一个字符串（指定为child1，也就是子组件中本地变量的名字），指定child1的类型为ChildComponent
- 使用这个@ViewChild装饰器可以在父组件中获得一个子组件的引用，也就可以在方法中调用子组件的方法
export class AppComponent implements OnInit{
title = 'app';
@ViewChild("child1")
child1:ChildComponent;
ngOnInit(): void {
this.child1.greeting("Tom");
}
}
- 在模板中调用子组件中的方法
<app-child #child1></app-child>
<app-child #child2></app-child>
<button (click)="child2.greeting('Jerry')">调用child2</button>
- AfterViewInit,AfterViewChecked这两个钩子只有在组件的模板所有的内容都被组装完成以后，这两个方法就会被调用，在父组件和子组件中都使用这两个方法
export class AppComponent implements OnInit,AfterViewInit,AfterViewChecked{
title = 'app';
@ViewChild("child1")
child1:ChildComponent;
ngOnInit(): void {
setInterval(()=>{
this.child1.greeting("Tom");
},5000);
}
ngAfterViewInit(): void {
console.log("父组件视图初始化完毕");
}
ngAfterViewChecked(): void {
console.log("父组件视图变更检测完毕");
}
}
export class ChildComponent implements OnInit ,AfterViewInit,AfterViewChecked{
constructor() { }
ngOnInit() {
}
greeting(name:string){
console.log("Hello " + name);
}
ngAfterViewInit(): void {
console.log("子组件视图初始化完毕");
}
ngAfterViewChecked(): void {
console.log("子组件视图变更检测完毕");
}
}
- 只有在所有子组件初始化和变更检测完毕，父组件才会初始化和变更检测完毕，初始化完毕只会被调用一次
- 在调用子组件其中一个方法的时候可能会触发整个视图的变更，angular无法判断调用的这个方法是否会影响视图改变，但是会触发angular的变更检测机制，它会调用所有组件上实现了ngAfterViewChecked方法都调用一遍
- 定义一个变量绑定在主组件中，在ngAfterViewInit（AfterViewChecked）改变它的值，这样会抛出一个异常，这是因为在变更检测周期中angular禁止在一个视图已经被组装好之后再去更新这个视图，
export class AppComponent implements OnInit,AfterViewInit,AfterViewChecked{
message:string;
@ViewChild("child1")
child1:ChildComponent;
ngAfterViewInit(): void {
console.log("父组件视图初始化完毕");
this.message="???";
}
}
10.在这两个方法中去改变组件中被绑定的属性就会出现异常，解决的方法就是，将这个改变放入到一个时间循环中去
ngAfterViewInit(): void {
console.log("父组件视图初始化完毕");
setTimeout(()=>{
this.message="???";
},0);
}
ngContent指令
- angular中可以使用ngContent指令将父组件的任意模板片段投影到子组件上，投影：在运行时动态改变模板的内容
- 生成一个子组件，在子组件的模板中使用ngContent指令来标记一个投影点，子组件中ng-content标签就会被替换成父组件中的子组件标签所包裹的内容
<div class="wrapper">
<h2>父组件</h2>
<div>这个div定义在父组件中</div>
<app-child>
<div>这个div是父组件投影到子组件的</div>
</app-child>
</div>
<div class="wrapper">
<h2>子组件</h2>
<div>这个div定义在子组件中</div>
<ng-content></ng-content>
</div>
- 使用多个ng-content，通过使用select来选择投影的哪一部分的内容（差值表达式中不能使用子组件中的属性，只是使用了父组件的title的值）
<div class="wrapper">
<h2>父组件</h2>
<div>这个div定义在父组件中</div>
<app-child>
<div class="header">这是页头，这个div是父组件投影到子组件的,标题{{title}}</div>
<div class="footer">这是页脚，这个div是父组件投影到子组件的</div>
</app-child>
</div>
<div class="wrapper">
<ng-content select=".header"></ng-content>
<h2>子组件</h2>
<div>这个div定义在子组件中</div>
<ng-content select=".footer"></ng-content>
</div>
- 使用属性绑定插入一段自定义的HTML
<div [innerHTML]="divContent"></div>
export class AppComponent {
title = 'app';
divContent = '<div>???????</div>';
}
- 用ng-content来投影和用属性绑定来绑定innerHTML
- innerHTML是一个浏览器特定的api，这种方式只能在浏览器中使用，ng-content方式是与平台无关的，所以拥有更好的移植性
- ng-content可以定义多个投影HTML的投影点，innerHTML只能插入一段
- ng-content只能绑定父组件的属性， innerHTML只能绑定当前组件的内容
- AfterContentInit, AfterContentChecked与AfterViewInit,AfterViewChecked类似，它们的区别是这两个钩子在被投影的内容组装完成之后调用的
- 在父组件和子组件中都是用这几个钩子函数（在组装视图时首先组装的是投影的内容，然后组装的是子组件中的内容）
ngAfterContentInit(): void {
console.log("父组件投影内容初始化完毕");
}
ngAfterContentChecked(): void {
console.log("父组件投影内容变更检测完毕");
}
ngAfterViewInit(): void {
console.log("父组件视图内容初始化完毕");
}
- AfterContentInit和AfterViewInit不同，在这个钩子函数中可以改变属性的值
ngAfterContentInit(): void {
console.log("父组件投影内容初始化完毕");
this.message="haha";
}
组件销毁ngDestroy
- 组件什么时候被销毁：当从一个路由地址跳转到另一个路由地址时，前一个路由地址对应的组件被销毁，后一个路由的组件会被创建
- 新建一个child2组件，配置路由，并且在两个子组件中都调用OnDestroy钩子
var routeConfig:Routes=[
{path:'',component:ChildComponent},
{path:'child2',component:Child2Component},
];
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(routeConfig)
],
ngOnDestroy(): void {
console.log("child组件被销毁");
}
网友评论