使用 ViewChild 的 Child To Parent Value 访问 [英] Child To Parent Value access using ViewChild

问题描述

我已经阅读了 angular6 中的文章，在孩子与父母沟通的 3 种方式.如果错误，请尽可能演示1) 输出发射器2)使用viewchild3)共享服务.

所以在这里我需要了解如何将 viewchild 从 child 传达给 parent.

在下面的演示中，在子组件中创建了一个表单，当子组件表单有效时，应反映在父组件中.但是当输入一些东西时，子组件表单是有效的，在子表单中启用了按钮，这些更改没有反映在需要有效的父组件中，但它没有按预期工作.谁能给出最好的方法?

父组件.html

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

父组件.html

import { Component, ViewChild, AfterViewInit } from '@angular/core';从 './child/child.component' 导入 { ChildComponent };@成分({选择器:'我的应用'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent 实现 AfterViewInit {公共检查:布尔值；@ViewChild(ChildComponent) 我的名字:ChildComponent；构造函数(){}ngAfterViewInit() {this.check = this.myname.loginForm.valid;}}

Child.component.html

childComponentArea
<h1>欢迎使用子组件</h1><form [formGroup]="loginForm"><input type="email" formControlName="email" placeholder="Email" ><button class="btn btn-danger" [disabled]="loginForm.invalid">提交</button></表单>

child.component.ts

import { Component, EventEmitter, Input,Output, OnInit } from '@angular/core';从@angular/forms"导入 { FormControl, FormGroup,Validators };@成分({选择器:应用程序子组件"，templateUrl: './child.component.html',styleUrls: ['./child.component.css']})导出类 ChildComponent 实现 OnInit {登录表单:表单组；名称:字符串='sahir';构造函数(){}ngOnInit() {this.createForm();}私有 createForm() {this.loginForm = new FormGroup({//tslint:disable-next-line电子邮件:new FormControl('', [Validators.required])});}k8}

演示

解决方案

您可能需要 ngAfterViewChecked 生命周期钩子来满足您的需求.父组件的 ngAfterViewInit 不会为每个子组件值更改而调用，而是会调用 ngAfterViewChecked.并且您还需要将父级中的change detection 推送到ViewChecked 生命周期钩子中，否则您将在此行中收到ExpressionChanged 错误.

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

所以这是应该工作的代码

import { Component, ViewChild, AfterViewChecked, ChangeDetectorRef } from '@angular/core';构造函数(私有 cdr:ChangeDetectorRef){}ngAfterViewChecked() {console.log('查看已检查')this._check = this.myname.loginForm.valid;console.log(this.myname.loginForm.valid);this.cdr.detectChanges();}

使用 [disabled]="!check"

代替 disabled="{{check}}"

演示

I have read about articles in angular6, 3 ways to communicate in child to parent.if its wrong,please demonstrate if possible 1)output emitter 2)using viewchild 3)shared Service.

So here i need to understand how to communicate the viewchild from child to parent.

In below demo, have created a form in child component,when child component form is valid, that should be reflected in parent component.In this demo when components gets loaded in ngafterViewInit hook the view child value , its working as expected , but when type some thing , child component form is valid,button enabled in child form ,those changes not reflected in the parent component which needs to valid , but its not working as expected. can anyone give the best approach?

parent component.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>

parent component.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

<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>

child.component.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

解决方案

You probably need ngAfterViewChecked life cycle hook for your requirement. ngAfterViewInit of parent wont be called for every child component value changed, instead ngAfterViewChecked would be called. And also you need to push the change detection within parent into ViewChecked life cycle hook, or else you will get ExpressionChanged error in this line.

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

So this is the code that should work

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();
}

An also instead of disabled="{{check}}", use [disabled]="!check"

DEMO

这篇关于使用 ViewChild 的 Child To Parent Value 访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！