Дочернее к родительскому значению доступ с помощью ViewChild - PullRequest
Новая
       54

Дочернее к родительскому значению доступ с помощью ViewChild

0 голосов
/ 01 июля 2018

Я прочитал о статьях на angular6, 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>

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

}

демо

1 Ответ

0 голосов
/ 01 июля 2018

Возможно, вам нужно ngAfterViewChecked крюк жизненного цикла для вашего требования. ngAfterViewInit родительского элемента не будет вызываться при каждом изменении значения дочернего компонента, вместо этого будет вызываться ngAfterViewChecked. А также вам нужно вставить 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

...