标签: ngonchanges

我的角度应用程序遇到了问题,我使用input作为数组,并在click事件出现时将值推送到数组.但是当数组推送完成时,ngOnChanges不会触发.有没有办法解雇ngOnChange

我的代码是ts文件

@Component({
  selector: 'adv-search',
  templateUrl: './app/modules/result.html'
})

export class InputComponent {
  @Input() metas:any=[];

  ngOnChanges() {
    console.log(this.metas);
  }
}

我的选择标签

<adv-search [metas] = "metaIds"></adv-search>

单击事件代码

insertIds(id:any) {
   metaIds.push(id);
}

有 2 个组件：parentComponent 和 ChildComponent，它们定义在父级内部。在 parentComponent 中有一个局部变量，它用作传递给 ChildComponent 的输入属性的值（使用 getter）。

父组件.ts：

@Component({
selector:'parent-component',
template:`
<h1>parent component</h1>
<child-component [personData]="PersonData"></child-component>
`
})
export class ParentComponent{
personData:Person;

get PersonData():Person{
return this.personData;
}

set PersonData(person:Person){
this.personData = person;
}

ngOnInit(){
this.PersonData = new Person();
this.PersonData.firstName = "David";
}

//more code here...

}

ChildComponent.ts：

@Component({
    selector:'child-component',
    template:`
    <h1>child component</h1>
    <div *ngIf="personData">{{personData.firstName}}</div>
    `
    })
export class ChildComponent{
    @Input() personData:Person;        

    //more code here...

 }

问题是：在父组件的某个地方，当特定事件发生时，会调用一个函数newPersonArrived(newPerson:PersonData)，函数代码如下：

newPersonArrived(newPerson:Person){
    this.PersonData = newPerson;
    }

这不会影响具有新人名的 UI！

只有以下有帮助：

newPersonArrived(newPerson:Person){
    this.PersonData = new …

如果我们在当前组件的 ngOnChanges 钩子的 SimpleChanges 打字稿参数中进行类型检查，那就太好了。

这将防止我们在检查的属性中出错。

服务中有一些数据，当我将数据放在服务上的对象中时，它可以正常工作，但是现在我已经建立了数据库连接，所以数据再也无法到达组件了。

我希望该服务订阅从数据库返回的数据，并已定义如下调用：

  public setPerson(ac: string): void{
    console.log(ac);
    this.generatePerson(ac).subscribe((data) => {
        // this.mapPersonFromInput(data[0]);
        console.dir(data);
    });

  }

该mapPersonFrominput()函数是对模拟数据的保留。它本质上与下面的extractData相同，但是来自代码中的静态对象。

generatePerson看起来像这样：

public generatePerson(id: string):Observable<Person>{
    var datRetUrl: string = '/api/'
    var fullUrl: string = datRetUrl + id;
    return this.http.get(fullUrl)
                .map(this.extractData)
                .catch(this.handleError);
  }

extractData只是将输入对象中的值分配给服务的对象结构，而handleerror只是将错误记录到控制台。

我通过从导航组件调用此函数来调用服务以在组件加载之前初始化组件的数据对象：

  passCodeToService():void{
    this.psn.setPerson(this.accessCode);
    this.route.navigate(['/name']);
  }

在应该获取数据的实际组件中，我正在使用ngOnInit，但是我认为我应该使用ngOnChanges来初始化该组件。这是我当前正在使用的代码，但是还没有运气修复。

ngOnInit() {
  this.name =this.psn.getName();
  console.log(this.name);
}

getName() 只需返回我存储在服务中的对象。

  public getName(): Name{
    return this.servicePerson.name;
  }

有谁知道更新 ngOnChanges 生命周期挂钩中的 mat 表数据源是否可以？或者是否存在潜在的数据泄漏或大规模性能问题？

这是我的意思的一个简单示例。

子组件有一个输入数据的父组件，如下所示：

<data-list [data]="someData"></data-list>

和子组件：

import { Component, Input, SimpleChanges, OnInit, OnChanges } from '@angular/core';
import { MatTableDataSource } from '@angular/material';


@Component({
  selector: 'data-list',
  templateUrl: './data-list.component.html',
  styleUrls: ['./data-list.component.scss']
})
export class DataListComponent implements OnInit, OnChanges {
  @Input() data: any[];

  dataSource: MatTableDataSource<any>;
  displayedColumns = [
    'title',
    'detail'
  ];

  constructor() { }

  ngOnInit() {
    this.dataSource = new MatTableDataSource<any>(this.data);
  }

  ngOnChanges(changes: SimpleChanges) {
    this.dataSource = new MatTableDataSource<any>(changes.data.currentValue);
  }

}

现在父组件订阅了不同的 observables，它们对数据的不同变化做出反应。也就是说，如果添加或删除数据，则父组件会相应地更新，并将其作为输入传递给子组件。

由于子组件使用 ngOnChanges 生命周期钩子来观察输入数据的变化，子组件通过实例化一个新的 MatTableDataSource 来更新表数据。

一切正常。除了 ngOnChanges …

我知道当组件的 @Input 属性来自其父组件时会触发 ngOnChanges。但是我如何检测 @Input 属性是否在其组件内发生了变化。我一直无法找到一个好的答案。谢谢

我有下一个html：

<select  [(ngModel)]="district"  class="form-control" (change)="dsChange()">

      <option disabled hidden [value]="undefined" >?????</option>

      <option *ngFor="let dis of districts" [ngValue]="dis">{{dis.title}}</option>
</select>

我还有下一个组件

@Input() district: District;
 ngOnChanges(changes: SimpleChanges) {
      console.log("CHANGED")
}
 dsChange(){
      console.log(this.district);
}

而且我不明白为什么当我选择一些值dsChange时会用区的正确值触发，但是ngOnChanges（）却没有

我需要检测 a 字段的实时变化FormGroup。我有一个简单的父子组件结构如下：

父组件视图

<my-child [myForm]="myForm"></my-child>

子组件控制器

@Input()
myForm: FormGroup;

ngOnChanges(changes: SimpleChanges) {
console.log('changes', changes)
}

问题是当表单字段更改时没有检测到任何更改。有没有办法触发ngOnChanges任何形式的变化？谢谢。

ngOnChanges()每当this.test组件生命周期或模板中的变量发生更改但我无法正常工作时，我都试图在Angular 5.x组件中调用函数，但该ngOnChanges()函数始终未调用。有人可以帮我吗？

src / app.ts：

import {Component, NgModule, Input, OnChanges, SimpleChanges} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" placeholder="Test field" value="{{ test }}">
    </div>
  `,
})
export class App implements OnChanges {
  @Input() test: string;
  name: string;
  constructor() {
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges');

    if (changes.test && !changes.test.isFirstChange()) {
      // exteranl API call or more preprocessing...
    }

    for (let propName in changes) {
      let change = changes[propName];
      console.dir(change); …

Angular默认提供生命周期钩子ngOnInit()和ngOnChanges().如果我们已经有ngOnChanges,为什么要使用ngOnInit？还有构造函数.

我在单个父组件中添加了相同的子组件三次

下面是在一个子组件上调用的更改函数，以更改selectedName其他两个子组件中的@Input字符串类型，如果我将其更改为对象，它可以正常工作。

这就是子组件的样子

export class AppComponent implements OnInit, OnChanges {
  @Input()
  value: number;

  constructor(
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit() {
    of(1).subscribe(v => {
        this.value = v;

        console.log(1);

        this.cdr.detectChanges();

        of(2).subscribe(() => {
          console.log(2);
        });
      })
  }

  ngOnChanges(c: SimpleChanges) {
    console.log(3);
  }
}

我希望 console.log 的序列应该是1, 3, 2但它只打印1, 2.

我知道ngOnChanges只有在input模板绑定发生更改时才会触发。

所以我this.cdr.detectChanges()马上打电话，console.log(1)但没有奏效。

这里有什么问题？

我在这里制作了 stackblitz 示例 - https://stackblitz.com/edit/angular-ivy-ugdba1

额外问题

如果无法触发ngOnChanges组件内部，将触发哪些生命周期钩子this.cdr.detectChanges()？

我试图理解回调 ngOnChanges() 所以我创建了下面发布的示例。但在编译时，尽管 Post 接口分别具有其属性 title 和 content 的值，但是，我没有收到来自 ngOnChanges 的任何日志

请让我知道如何正确使用

应用程序组件.ts：

import { Component, OnInit, OnChanges, SimpleChanges,Output, EventEmitter } from '@angular/core';

export interface Post {
  title:string;
  content:string;
}

@Component({
  selector: 'app-post-create',
  templateUrl: './post-create.component.html',
  styleUrls: ['./post-create.component.css']
})
export class PostCreateComponent implements OnInit {

  @Output() post : Post;
  @Output() onPostSubmittedEvtEmitter: EventEmitter<Post> = new EventEmitter<Post>();
  constructor() { 
    this.post = {} as Post;
  }

  ngOnInit(): void {
  }
  
  ngOnChanges(changes: SimpleChanges) {
    for (let changedProperty in changes) {
      console.log("ngOnChanges->: changes[changedProperty].previousValue: " + …