磊叔头光光 發表於 2020-7-17 11:35:00

angular子组件监听父组件传入值的变化

<p>在进入主题之前，先了解一下angular的生命周期。</p>
<p><strong>生命周期</strong></p>
<p>钩子分类</p>
<ul>
<li>
<p>指令与组件共有的钩子</p>
<ul>
<li>ngOnChanges</li>
<li>ngOnInit</li>
<li>ngDoCheck</li>
<li>ngOnDestroy</li>
</ul>
</li>
<li>
<p>组件特有的钩子</p>
<ul>
<li>ngAfterContentInit</li>
<li>ngAfterContentChecked</li>
<li>ngAfterViewInit</li>
<li>ngAfterViewChecked</li>
</ul>
</li>
</ul>
<p>生命周期钩子的作用及调用顺序</p>
<ol>
<li>ngOnChanges - 当数据绑定输入属性的值发生变化时调用</li>
<li>ngOnInit - 在第一次 ngOnChanges 后调用</li>
<li>ngDoCheck - 自定义的方法，用于检测和处理值的改变</li>
<li>ngAfterContentInit - 在组件内容初始化之后调用</li>
<li>ngAfterContentChecked - 组件每次检查内容时调用</li>
<li>ngAfterViewInit - 组件相应的视图初始化之后调用</li>
<li>ngAfterViewChecked - 组件每次检查视图时调用</li>
<li>ngOnDestroy - 指令销毁前调用</li>
</ol>
<p>首次加载顺序</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">export class demoComponent {

    constructor() {

      console.log('00构造函数执行了---除了使用简单的值对局部变量进行初始化之外，什么都不应该做')--非生命周期函数
    }

    ngOnChanges() {

      console.log('01ngOnChages执行了---当被绑定的输入属性的值发生变化时调用(父子组件传值的时候会触发)');
    }

    ngOnInit() {
      console.log('02ngOnInit执行了--- 请求数据一般放在这个里面');
    }
    ngDoCheck() {
      console.log('03ngDoCheck执行了---检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应');
    }
    ngAfterContentInit() {
      console.log('04ngAfterContentInit执行了---当把内容投影进组件之后调用');
    }
    ngAfterContentChecked() {
      console.log('05ngAfterContentChecked执行了---每次完成被投影组件内容的变更检测之后调用');
    }
    ngAfterViewInit() : void {
      console.log('06 ngAfterViewInit执行了----初始化完组件视图及其子视图之后调用（dom操作放在这个里面）');
    }
    ngAfterViewChecked() {
      console.log('07ngAfterViewChecked执行了----每次做完组件视图和子视图的变更检测之后调用');
    }

    ngOnDestroy() {
      console.log('08ngOnDestroy执行了····');
    }

    //自定义方法
    changeMsg() {

      this.msg = "数据改变了";
    }
}
</pre>
</div>
<p>&nbsp;参照：https://www.cnblogs.com/Aerfajj/p/10748887.html</p>
<p>我们的要求是子组件监听父组件传入的值，而ngOnChanges的作用是当数据绑定输入属性的值发生变化时调用，正是我们所需要的。废话不多说，直接上代码：</p>
<p>父组件</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">&lt;child-demo ="tabValue"&gt;&lt;/child-demo&gt;
</pre>
</div>
<p>&nbsp;子组件ts(与SimpleChange配合使用)</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">import {Component, EventEmitter, Input, OnInit, <span style="background-color: rgba(255, 153, 204, 1)">OnChanges, SimpleChange</span>, Output} from '@angular/core';

@Component({
selector: 'app-child-demo',
templateUrl: './child-demo.component.html',
styleUrls: ['./child-demo.component.scss']
})
export class ChildDemoComponent implements OnInit {
<span style="background-color: rgba(255, 153, 204, 1)">@Input() tabValue;</span>
@Output() gotoList: EventEmitter&lt;{ goto: boolean, group: string}&gt; = new EventEmitter&lt;{goto: false, group: ''}&gt;();
constructor(private childDemoService: ChildDemoService) {
}

ngOnInit() {   
}
<span style="background-color: rgba(255, 153, 204, 1)">ngOnChanges(changes: SimpleChange){
    if (changes['tabValue']) {
      //具体业务代码
    }
}</span>
}<br><span style="color: rgba(0, 128, 0, 1)">//changes['tabValue']有三个属性，currentValue-当前值previousValue-改变之前的值 firstChange-是否是第一次改变（previousValue为undefined时true,否则为false）
</span></pre>
</div>
<p>&nbsp;总结：</p>
<p>1.<span>ngOnChanges</span>只对@Input传入的属性发生变化时会调用。</p>
<p>2.当@Input属性是一个对象，当对象的属性值发生变化并不会触发，当对象的引用发生变化时才会触发。</p>
<p>&nbsp;</p><br><br>
来源：https://www.cnblogs.com/myyouzi/p/13328911.html
頁: [1]
查看完整版本: angular子组件监听父组件传入值的变化