代码之家 › 专栏 › 技术社区 › Mohamed Sahir

使用viewchild访问子级到父级的值

viewchild angular4-forms angular-reactive-forms angular6 angular

0

Mohamed Sahir · 技术社区 · 7 年前

我读过关于安古拉语的文章,3种儿童与家长交流的方式。如果有错误,请尽可能演示一下。 1)输出发射器 2)使用ViewChild 3)共享服务。

所以在这里,我需要理解如何将视图子对象从一个孩子传递给另一个家长。

在下面的演示中,已经在子组件中创建了一个窗体,当子组件窗体有效时,它应该反映在父组件中。在这个演示中,当组件加载到ngafterviewinit中时,钩住视图子值,它按预期工作,但是当键入某些内容时,子组件窗体是有效的,在子窗体中启用了按钮,这些更改没有反映在需要有效的父组件中,但不能按预期工作。有人能给出最好的方法吗?

父组件.html

<h1> Parent Component</h1>

<button class="btn btn-danger " disabled="{{check}}">CheckParentEnable</button>
<div class="childComponent">
<app-child-component></app-child-component>
 k2
  </div>

父组件.html

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child/child.component';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  public check: boolean;
  @ViewChild(ChildComponent) myname: ChildComponent;


  constructor() {

  }
  ngAfterViewInit() {
    this.check = this.myname.loginForm.valid;
  }

}

child.component.html(子组件.html)

<h4>childComponentArea<h4>

  <h1>Welcome to child component</h1>


<form [formGroup]="loginForm">

<input type="email" formControlName="email" placeholder="Email" >

<button class="btn btn-danger" [disabled]="loginForm.invalid">Submit</button>
</form>

子组件.ts

import { Component, EventEmitter, Input,Output, OnInit } from '@angular/core';
import { FormControl, FormGroup,Validators } from '@angular/forms';
@Component({
  selector: 'app-child-component',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  loginForm:FormGroup;
  name:string ='sahir';
  constructor() { }

  ngOnInit() {
    this.createForm();
  }


 private createForm() {
    this.loginForm = new FormGroup({
      // tslint:disable-next-line
      email: new FormControl('', [Validators.required])

    });
  }

  k8

}

demo

1 回复 | 直到 7 年前

1

3

Amit Chigadani 7 年前

你可能需要 ngAfterViewChecked 生命周期挂钩,满足您的需求。 ngAfterViewInit 对于每个更改的子组件值,不会调用父组件的 ngafterview已检查 会被召唤。而且你还需要推动 change detection 在父级到中 ViewChecked 生命周期挂钩,否则你会 ExpressionChanged 此行出错。

this.check = this.myname.loginForm.valid;

所以这就是应该起作用的代码

import { Component, ViewChild, AfterViewChecked, ChangeDetectorRef } from '@angular/core';
constructor(private cdr : ChangeDetectorRef) {

}

ngAfterViewChecked() {
     console.log('view checked')
     this._check = this.myname.loginForm.valid;
     console.log(this.myname.loginForm.valid);
     this.cdr.detectChanges();
}

也不是 disabled="{{check}}" ,使用 [disabled]="!check"

DEMO