[英]Child To Parent Value access using ViewChild
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. 我已经阅读了有关angular6的文章,其中有3种方法可以在子代与父代之间进行通信。如果错误,请演示1)输出发射器2)使用viewchild 3)共享服务。
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. 在下面的演示中,在子组件中创建了一个窗体,当子组件窗体有效时,该窗体应反映在父组件中。在此演示中,当组件加载到ngafterViewInit中时,请钩住view子值,其工作原理与预期的一样,但在键入时有些事情,子组件形式是有效的,以子形式启用了按钮,这些更改未反映在需要有效的父组件中,但未按预期工作。 can anyone give the best approach?
谁能提供最好的方法?
parent component.html 父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 父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 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 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
}
You probably need ngAfterViewChecked
life cycle hook for your requirement. 您可能需要
ngAfterViewChecked
生命周期挂钩来满足您的需求。 ngAfterViewInit
of parent wont be called for every child component value changed, instead ngAfterViewChecked
would be called. 父项的
ngAfterViewInit
不会为每个子组件值的更改而调用,而是会调用ngAfterViewChecked
。 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. 另外,您还需要将父项中的
change detection
推入ViewChecked
生命周期挂钩中,否则您将在此行中遇到ExpressionChanged
错误。
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"
还可以使用
[disabled]="!check"
而不是disabled="{{check}}"
[disabled]="!check"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.