Angular 无法触发子组件@Input()值变化的奇怪问题

川长思鸟来 2023-03-13 02:14 0阅读 0赞

**子组件：TitleComponent**

title.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';
    
    @Component({
        selector: 'app-title',
        template: `<h2>{
       {title}}</h2><br/>
        <ul *ngFor="let message of messages"><li>{
       {message}}</li></ul><br/>
        <button (click)="click()">确定</button>  
        <button (click)="update()">值变更</button>
        `
    })
    export class TitleComponent {
        @Input() title = '';
        @Input() messages: string[] = [];
        @Output() output: EventEmitter<any> = new EventEmitter();
        constructor() { }
    
        click(): void {
            this.output.emit();
        }
    
        update(): void {
            this.title = 'hello';
            this.messages = [];
        }
    }

**父组件：Tab1Page**

tab1.page.html

<app-title (output)="output()" [title]="title" [messages]="messages"></app-title>

tab1.page.ts

import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-tab1',
      templateUrl: 'tab1.page.html',
      styleUrls: ['tab1.page.scss']
    })
    export class Tab1Page {
      title:string = '';
      messages:string[] = [];
    
      constructor() {}
    
      public output(): void {
        this.title = 'world';
        this.messages.push('how are you');
      }
    }

![20200509162724423.png][]

点击确定按钮

![20200509162747455.png][]

再次点击

![20200509162804459.png][]

好了没问题，现在点击值变更按钮

![20200509162846860.png][]

然后再点击确定按钮，发现不管点击多少次都是下面这个样子

![20200509162913562.png][]

很奇怪吧。现在我们修改下tab1.page.ts

import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-tab1',
      templateUrl: 'tab1.page.html',
      styleUrls: ['tab1.page.scss']
    })
    export class Tab1Page {
      title:string = '';
      messages:string[] = [];
      int: number = 1;
    
      constructor() {}
    
      public output(): void {
        this.int++;
        this.title = 'world ' + this.int;
        const messages = [];
        messages.push('how are you');
        this.messages = messages;
      }
    }

重新执行上面的操作，值变更后点确定

![20200509163418885.png][]![20200509163432736.png][]

会一直有值，这是为什么呢？我个人猜测是第一次的时候没有触发angular的赃检测，而第二次因为两个变量的值改变并且内存地址也改变所以触发的赃检测。

遇到这种解决办法：

一、使用@ViewChild

<app-title \#apptitle (output)="output()" \[title\]="title" \[messages\]="messages"></app-title>

import { Component, ViewChild } from '@angular/core';
    import { TitleComponent } from '../title/title.component';
    
    @Component({
      selector: 'app-tab1',
      templateUrl: 'tab1.page.html',
      styleUrls: ['tab1.page.scss']
    })
    export class Tab1Page {
      @ViewChild('apptitle') apptitle: TitleComponent;
      title:string = '';
      messages:string[] = [];
    
      constructor() {}
    
      public output(): void {
        this.apptitle.title = 'world';
        this.apptitle.messages.push('how are you');
      }
    }

二、对于数组有两种办法

1）清空值的时候不要用this.messages = \[\];这种重新赋值的方式，用下面方式清空数组

this.messages.splice(0);

2）在赋值的时候采用es6的写法

this.messages= \[...this.messages, 'how are you'\];

[20200509162724423.png]: /images/20230312/4a130a96958149f3a0ec4d68334e0cc1.png
[20200509162747455.png]: /images/20230312/1ff47fe8ac0046db9e5e2e25d617b7c4.png
[20200509162804459.png]: /images/20230312/85634cff266e45009187b1c698e7a9b4.png
[20200509162846860.png]: /images/20230312/35abaada26914a67987ca15a2f41baba.png
[20200509162913562.png]: /images/20230312/5953f55f82c346bfb6a826dee2a5c142.png
[20200509163418885.png]: https://img-blog.csdnimg.cn/20200509163418885.png
[20200509163432736.png]: /images/20230312/a19c1612b1554787899fe38dbc668929.png