Question

此示例意图是检查ChangeDetection。

当我尝试使用@input属性将数据从homecomponent传递给childcomponent时，Observable给出了以下错误：

Unhandled Promise rejection: Cannot read property 'subscribe' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'subscribe' of undefined
at changeDetectionChildComponent.ngOnInit (child.component.ts:20)
at checkAndUpdateDirectiveInline (provider.ts:275)
at checkAndUpdateNodeInline (view.ts:456)
at checkAndUpdateNode (view.ts:417)
at debugCheckAndUpdateNode (services.ts:235)
at debugCheckDirectivesFn (services.ts:294)
at Object.eval [as updateDirectives] (parent.html:4)
at Object.debugUpdateDirectives [as updateDirectives] (services.ts:273)
at checkAndUpdateView (view.ts:345)
at callViewAction (view.ts:700) TypeError: Cannot read property 'subscribe' of undefined

以下是我创建的项目

home.component.ts

    import { Component } from "@angular/core";
    import { Observable } from "rxjs/Observable";

    @Component({
        selector:'changeDetectorHome',
        templateUrl:'ChangeDetection/Views/parent.html'
      })
      export class changeDetectionHomeComponent {
      myData:{firstname:string,lastname:string}
      message:string;
        constructor(){

            this.myData={
                firstname: 'Debasish',
                lastname:'K'
            }
        }


        changeName() {
          this.myData.firstname = 'Brad';
          this.myData.lastname='pitt';
          this.message="somedata";
              }
      }

home.html - 家庭组件的视图

＆＃13;

 <h1>{{myData.firstname}} {{myData.lastname}}</h1>
  
 <button (click)="changeName()">Change name</button>
         
<child [passObjectTochild]="myData" [passStringTochild]="message"></child>

＆＃13;

child.component.ts

        import { Component, Input, ChangeDetectionStrategy, OnInit, ChangeDetectorRef } from "@angular/core";
        import { Observable } from "rxjs/Observable";


        @Component({
            selector:'child',
            templateUrl:'ChangeDetection/Views/child.html',
            changeDetection: ChangeDetectionStrategy.OnPush
          })
         export  class changeDetectionChildComponent implements OnInit{

           @Input('passObjectTochild') data:{firstname:string,lastname:string};
           @Input('passStringTochild') data1:Observable<string>;
           counter:number=0;
            constructor(private cd: ChangeDetectorRef){

            }

            ngOnInit(){
              this.data1.subscribe(
              ()=>{
                this.counter ++;

            })}


          }

changeDetection.Module.ts

    import { NgModule } from "@angular/core";
    import {BrowserModule } from '@angular/platform-browser'
    import { changeDetectionHomeComponent } from "./home.component";
    import { changeDetectionChildComponent } from "./child.component";

    @NgModule({
        imports:[BrowserModule],
        declarations:[changeDetectionHomeComponent,changeDetectionChildComponent],
        bootstrap:[changeDetectionHomeComponent]
    })
    export class changeDetectionModule{ }

main.ts

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'
import { changeDetectionModule } from './changedetection.module';

platformBrowserDynamic().bootstrapModule(changeDetectionModule);

Answer 1

你需要初始化你的子组件中的observable并设置一个默认值，导致错误，试试这个解决方案

 @Input('passStringTochild') data1:Observable<string>= Observable.of(null);

以这种方式，你的observable总是会被初始化，当你传递来自父级的输入时会被覆盖

@Input as Angular 2/4/5中的Observable <string>

1 个答案: