如何检测Angular 4中用户定义类型的@Input（）绑定的更改

下面是我正在做的示例代码

模型组件

//app.models.ts
export class Employee{
 Name:string;
 Salary:number;
}

//app.component.ts 
import { Component } from '@angular/core';   
import { Employee } from './app.models.ts';

@Component({
  selector: 'my-app',
  template: '<input type="text" [(ngModel)]="emp.Name"><hello [employee]="emp"></hello>'
})
export class AppComponent  {
  emp:Employee;
  constructor(){
    this.emp=new Employee();
    this.emp.Name="Neeraj";
  }      
}

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Employee } from './app.models.ts';
@Component({
  selector: 'hello',
  template: `<h1>{{displayName}}</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})

export class HelloComponent implements OnChanges  {
  @Input() employee: Employee;
  displayName:string;
  ngOnChanges(changes: SimpleChanges) {
        console.log('Life cycle hook method called.');
        this.displayName='Hello, '+this.employee.Name;
        }
}

根分量

//app.models.ts
export class Employee{
 Name:string;
 Salary:number;
}

//app.component.ts 
import { Component } from '@angular/core';   
import { Employee } from './app.models.ts';

@Component({
  selector: 'my-app',
  template: '<input type="text" [(ngModel)]="emp.Name"><hello [employee]="emp"></hello>'
})
export class AppComponent  {
  emp:Employee;
  constructor(){
    this.emp=new Employee();
    this.emp.Name="Neeraj";
  }      
}

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Employee } from './app.models.ts';
@Component({
  selector: 'hello',
  template: `<h1>{{displayName}}</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})

export class HelloComponent implements OnChanges  {
  @Input() employee: Employee;
  displayName:string;
  ngOnChanges(changes: SimpleChanges) {
        console.log('Life cycle hook method called.');
        this.displayName='Hello, '+this.employee.Name;
        }
}

//app.component.ts
从'@angular/core'导入{Component}；
从'./app.models.ts'导入{Employee}；
@组成部分({
选择器：“我的应用程序”，
模板：“”
})
导出类AppComponent{
emp：雇员；
构造函数（）{
this.emp=新员工（）；
这个.emp.Name=“Neeraj”；
}      
}

子组件

//app.models.ts
export class Employee{
 Name:string;
 Salary:number;
}

//app.component.ts 
import { Component } from '@angular/core';   
import { Employee } from './app.models.ts';

@Component({
  selector: 'my-app',
  template: '<input type="text" [(ngModel)]="emp.Name"><hello [employee]="emp"></hello>'
})
export class AppComponent  {
  emp:Employee;
  constructor(){
    this.emp=new Employee();
    this.emp.Name="Neeraj";
  }      
}

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Employee } from './app.models.ts';
@Component({
  selector: 'hello',
  template: `<h1>{{displayName}}</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})

export class HelloComponent implements OnChanges  {
  @Input() employee: Employee;
  displayName:string;
  ngOnChanges(changes: SimpleChanges) {
        console.log('Life cycle hook method called.');
        this.displayName='Hello, '+this.employee.Name;
        }
}

从'@angular/core'导入{Component，Input，OnChanges，SimpleChanges}；
从'./app.models.ts'导入{Employee}；
@组成部分({
选择器：“你好”，
模板：`{displayName}}`，
样式：[`h1{font-family:Lato；}`]
})
导出类HelloComponent实现OnChanges{
@输入（）职员：职员；
显示名称：字符串；
ngOnChanges（更改：SimpleChanges）{
log（'调用了生命周期钩子方法'）；
this.displayName='Hello'，+this.employee.Name；
}
}

在子组件中未检测到文本框文本更改

---

您可以通过ngOnChanges（）

编辑 属性名称更改时，不会修改值emp，因此在子组件中检测不到任何更改。您所能做的就是只传递属性

@Component({
  selector: 'my-app',
  template: '<input type="text" [(ngModel)]="emp.Name"><hello [name]="emp.Name"></hello>'  
})
export class AppComponent  {
  emp:Employee;
  constructor(){
    this.emp=new Employee();
    this.emp.Name="Neeraj";
  }

}

@组件({
选择器：“我的应用程序”，
模板：“”
})
导出类AppComponent{
emp：雇员；
构造函数（）{
this.emp=新员工（）；
这个.emp.Name=“Neeraj”；
}
}

及

@组件({
选择器：“你好”，
模板：`{displayName}}`，
样式：[`h1{font-family:Lato；}`]
})
导出类HelloComponent实现OnChanges{
@Input（）名称：String；
显示名称：字符串；
ngOnChanges（更改：SimpleChanges）{
log（'调用了生命周期钩子方法'）；
this.displayName='Hello'，+this.name；
}
}

有两种方法可供选择

• 使用ngOnChanges
• 使用typescript中的getter和setter

宣读

---

我想将我的用户定义类型用于输入属性。Ex-@输入属性：MyClass；用户是什么？它来自哪里？你有什么问题？编辑你的问题以使其更清晰Hi HMarteau，我已经编辑了我的问题，现在它更清晰了吗？