Question

在学习Angular 4时，我遇到了这个小任务的问题。我已经尝试过读取组件之间的数据传输了，我试过阅读2路绑定 - 似乎没有用。

我将发布我的父母和子组件的.ts和.html文件

父.ts文件：

<div>
  <h3>Enter your Bank's name to see it's aviable branches</h3>
  <input [(ngModel)]="bank" placeholder="Enter your bank's name"/>
</div>
<app-cca-bank-branches [check]="bank"></app-cca-bank-branches>

父.html文件：

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

@Component({
  selector: 'app-cca-bank-branches',
  templateUrl: './cca-bank-branches.component.html',
  styleUrls: ['./cca-bank-branches.component.css']
})
export class CcaBankBranchesComponent implements OnInit {

  constructor() { }

  @Input() check:string;

  branch:string;

  checkBranch(check){
    if(this.check == "poalim"){
     this.branch = 'aviable branches are 1 2 3';
     return this.branch
    }else{
      this.branch = 'error';
      return this.branch
    }
  };
  ngOnInit() {
    this.branch = this.checkBranch(this.check);
  }
}

Child .ts文件：

<div>
  List of aviable Branches :
  {{branch}}<br>
  {{check}}
</div>

Child .html文件：

'allow_extra_fields' => true

我的目标是当用户写入父输入时 - 孩子获取该输入并在“checkBranch（）”函数中运行并检查其值：除非用户写“poalim”，否则它应该总是回归和错误。

在父文件的.ts文件中，“bank”变量的第一个值是子项得到的值。无论我改变它多少次 - 它都不会动态变化 - 会发生什么，除非“bank”变量设置为“poalim”开始 - 无论我多少次更改输入 - 它都不会改变。我很确定它与我在类的NgOnInit部分运行函数这一事实有关 - 但我似乎找不到以不同方式运行它的方法......

我必须在.ts文件中发生逻辑（通过HTML文件完成它并且它确实有效 - 现在我需要ts文件来预先形成我的代码的功能）

提前致谢！真的，我现在已经尝试了5个小时。

Answer 1

当角度为ngOnChanges()或input property setter

的子组件中的输入发生变化时，有两种方法可以检测和操作

ngOnChanges（）生命周期：

@Input（）check：string;

ngOnChanges(changes: SimpleChanges) {

    this.checkBranch(changes.check.currentValue);
    // You can check.previousValue and check.firstChange for comparing the old and new value
}

输入属性设置器如下

private _check：string;

@Input() set check(value: string) {
   this._check= value;
   this.checkBranch(this._check);

}

get check(): string {
    return this._check;
}

Answer 2

我认为您应该在check生命周期挂钩而不是OnChanges挂钩中处理OnInit输入。

import { ... OnChanges, SimpleChanges } from '@angular/core';

@Component(...)
export class CcaBankBranchesComponent implements OnInit, OnChanges {
  ...
  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['check']) {
      this.branch = this.checkBranch(this.check);
    }
  }
}

Angular 4 Parent-Child一致的数据传输

2 个答案: