Child 到 Parent 使用视图访问值Child

Question

我看过angular6的文章，child到parent.if的3种交流方式是错误的，如果可能请演示 1）输出发射器 2) 使用视图child 3)共享服务。

所以在这里我需要了解如何将视图child从child传达给parent。

在下面的demo中，在child组件中创建了一个表单，当child组件表单有效时，应该反映在parent component.In这个demo中组件在 ngafterViewInit 中加载 hook 视图 child 值，它按预期工作，但是当输入一些东西时，child 组件表单有效，按钮在 child 表单中启用，这些更改没有反映在需要 valid 的 parent 组件中，但它没有按预期工作。谁能给出最好的方法？

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

Answer 1

您可能需要 ngAfterViewChecked 生命周期钩子来满足您的要求。父组件的 ngAfterViewInit 不会为每个更改的子组件值调用，而是调用 ngAfterViewChecked。而且你还需要将 parent 中的 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

Child 到 Parent 使用视图访问值Child

Child To Parent Value access using ViewChild

angular

angular6

angular-reactive-forms

angular4-forms

viewchild