Question

在angular2中我有一个addproperty组件（祖父母）和addproperty2组件（父）和一个复选框组件（子）。在祖父母中有一个带有 add 按钮的表单如果将显示用户单击父组件中的复选框，则再次显示添加按钮。祖父母html：

    <div *ngIf="page2">
      <add-property-page2></add-property-page2>
    </div>

    <div class="text-center col-sm-12">
      <button [disabled]="!propertyForm.form.valid"
              (click)="onSubmit($event,value,amlak)"
              type="submit" class="btn btn-success">Add
      </button>
    </div>

这意味着如果page2为true，则显示祖父母中的父html。祖父母组成部分：

import {Component, OnInit, ViewChild, ViewEncapsulation,Input} from '@angular/core';
import {AddPropertyPage2Component} from "./add-paroperty-page2.component";
@Component({
selector: 'add-property',
templateUrl: './add-property.html'
})
export class AddPropertyComponent implements OnInit {
private page2: boolean;
@ViewChild(AddPropertyPage2Component)
private checkbox: AddPropertyPage2Component;
onSubmit($event: any) {
$event.preventDefault();
if(this.page2){
  this.amlak.emkanat = this.checkbox.emkan.filter(e=>e.checked == true);
 }
}

父html：

<div class="col-md-12 form-group">
<checkbox></checkbox>
 </div>

父组件：

import {Component, OnInit,ViewChild} from '@angular/core';
import {CheckBoxComponent} from './checkbox.component';
@Component({
selector:'add-property-page2',
templateUrl:'./add-property-page2.html',
})
export class AddPropertyPage2Component{
 @ViewChild(CheckBoxComponent)
 private checkboxcomponent: CheckBoxComponent;
 public emkan = this.checkboxcomponent.emkanats;
  }

和复选框组件：

import {Component, OnInit} from '@angular/core';
import {checkBoxClass} from '../models/checkboxClass';
import {CheckBoxService} from '../services/checkbox.service';
@Component({
selector: 'checkbox',
styleUrls: ['./checkbox.css'],
templateUrl: './checkbox.html',
})
 export class CheckBoxComponent implements OnInit {
 public emkanats: checkBoxClass[];

 constructor(private checkboxService: CheckBoxService) {
  }

  ngOnInit() {
  this.checkboxService.getCheckboxes().subscribe(res => this.emkanats = 
  res);
  }
  }

这是复选框类：

export class checkBoxClass {
title:string;
 value:string;
checked:boolean;
 image:number;
 }

复选框服务：

import {Injectable} from '@angular/core';
import {checkBoxClass} from '../models/checkboxClass';
import {Http,Headers,Response} from '@angular/http';
 import { Observable }     from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable() export class CheckBoxService{
 private checkboxUrl:string = '../../checkbox.json';

 constructor(private http:Http){}

 getCheckboxes(): Observable<checkBoxClass[]> {
  return this.http.get(this.checkboxUrl)
  .map(response => response.json())
 }
 }

现在错误是这样的：无法读取属性＆＃39; emkan＆＃39;未定义的我在两个组件中使用了viewchild方法，但我不知道这个错误的原因。你能帮我用viewchild方法解决这个问题吗？非常感谢你。

在祖父母和子角2之间传递数据

0 个答案: