0

我是 Angular 的新手，所以如果我在尝试从组件 B 调用组件 A 的当前值时犯了愚蠢的错误，我深表歉意。它会出错。当弹出模式表单处于活动状态时，我试图调用这些值。单击打开弹出窗口时，我试图调用一个函数“editUserData（）”，但它给出了错误。

A组份

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { userRegistrationData } from 
'src/app/models/registrationUser.models';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { EditUserDetailComponent } from '../editUser/edit-user-detail/edit- 
user-detail.component';
@Component({
selector: 'app-registration-form',
templateUrl: './registration-form.component.html',
styleUrls: ['./registration-form.component.css']
})
export class RegistrationFormComponent implements OnInit {

constructor(private httpClient: HttpClient ) { }


public currentValue: string;


editUserData(value:any): void
{
  this.currentValue = value;
}

}

B组份

import { Component, OnInit,ViewChild, ViewChildren, AfterViewInit, 
ElementRef, HostListener, Input, Injectable, AfterViewChecked, 
AfterContentInit, ContentChild } from '@angular/core';
import {ModalDirective} from 'mdbootstrap';
import { userRegistrationData } from 
'src/app/models/registrationUser.models';
import { NgForm } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { RegistrationFormComponent } from '../../registration- 
form/registration-form.component';

@Component({
selector: 'app-edit-user-detail',
templateUrl: './edit-user-detail.component.html',
styleUrls: ['./edit-user-detail.component.css']
})

export class EditUserDetailComponent implements OnInit , AfterViewInit {
 public editThisDetail: userRegistrationData;
value : string;
constructor(private httpClient: HttpClient, ){}

@ViewChild('RegistrationFormComponent') registrationFormComponent: 
RegistrationFormComponent;


 @ContentChild(RegistrationFormComponent)
public registraionComponent :  RegistrationFormComponent;



  pushData()
  {
    console.log("asif");
    console.log("asif",this.registraionComponent.currentValue);
  }

  ngAfterViewInit()
  {
    this.pushData();
  }

  ngOnInit() {

  }

  }

错误在代码中：RegistrationFormComponent.html:81 错误类型错误：无法读取 EditUserDetailComponent.push../src/app/createUser/editUser/edit-user-detail/edit-user-detail.component.ts 处未定义的属性“currentValue” .EditUserDetailComponent.pushData (edit-user-detail.component.ts:50) 在 EditUserDetailComponent.push../src/app/createUser/editUser/edit-user-detail/edit-user-detail.component.ts.EditUserDetailComponent。 ngAfterViewInit

4

1 回答 1

0

在您的情况下是EditUserDetailComponent孩子并且RegistrationFormComponent是父母，您可以通过 DI 访问如下 -

编辑用户详细信息组件

constructor(private httpClient: HttpClient, 
     @Inject(forwardRef(() => RegistrationFormComponent)) private registraionComponent:RegistrationFormComponent){

}

删除以下代码

@ViewChild('RegistrationFormComponent') registrationFormComponent: 
RegistrationFormComponent;


 @ContentChild(RegistrationFormComponent)
public registraionComponent :  RegistrationFormComponent;
于 2018-11-13T14:04:55.150 回答