Javascript 当父数据更改时，未呈现角度子组件

下面的代码我有选择英雄的方法，它正在更新app.component的selectedHero，但在更新detail.component之后，不会重新提交。 请告诉我如何在父数据更改时通知子组件

app.component.ts

            import { heroes } from './Hero.service';
            import { Component, OnInit } from '@angular/core';
            import {Hero} from './Hero'
            import { heroes } from './Hero.service';
            import { Component, OnInit } from '@angular/core';
            import {Hero} from './Hero'
        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
          styleUrls: ['./app.component.scss']
        })
        export class AppComponent  {
          title = 'tour-of-heroes';
          Heroes:Hero[]=heroes;
          selectedHero:Hero;
          constructor(){

          }

          selectHero(hero){
          this.selectedHero=hero;
          console.log(this.selectedHero)
          }
        }

**主元件**

        import { Hero } from './../Hero';
        import { Component, OnInit ,Input, Output} from '@angular/core';
        import { EventEmitter } from 'protractor';

        @Component({
          selector: 'app-master',
          templateUrl: './master.component.html',
          styleUrls: ['./master.component.scss']
        })
        export class MasterComponent implements OnInit {
          @Input() Heroes:Hero[];
          @Input() selectHero;
          constructor() { }

          ngOnInit() {
            console.log(this.Heroes,'master Heroes')
          }

        }

        details.component.ts

        import { Hero } from './../Hero';
        import { Component, OnInit, Input } from '@angular/core';
        @Component({
          selector: 'app-detail',
          templateUrl: './detail.component.html',
          styleUrls: ['./detail.component.scss']
        })
        export class DetailComponent implements OnInit {
          @Input() selectedHero:Hero;
          constructor() { }

          ngOnInit() {
            console.log(this.selectedHero)
          }

        }

        **app.component.html**

        '''
        <div style="text-align:center">
          <h1>Tour of Heroes</h1>
          <div class="Layout">
              <app-master [Heroes]="Heroes" [selectHero]="selectHero"></app-master>

          </div>
            <div class="Layout">
                <app-detail [selectedHero]="selectedHero"></app-detail>
            </div>

        </div> '''

        **master.component.html**

        '''<div class="master">
          <ul>
            <li *ngFor="let hero of Heroes" (click)="selectHero(hero)">
                <span>
                    Id : {{hero.id}}
                </span>
                <br/>
                <span>
                    Name : {{hero.name}}
                </span>
            </li>
          </ul>
        </div>'''

        ** detail Component **
        '''
        <div *ngIf="selectedHero">
          <h3>Selected Hero is : {{selectedHero.name}} </h3>
          <div>
              <p>Id : {{selectedHero.id}}</p>
              <p>Name : {{selectedHero.name}}</p>
          </div>
        </div>

从“/../Hero”导入{Hero}；
从“@angular/core”导入{Component，OnInit，Input，Output}；
从“量角器”导入{EventEmitter}；
@组成部分({
选择器：“应用程序主机”，
templateUrl:“./master.component.html”，
样式URL:['./master.component.scss']
})
导出类MasterComponent实现OnInit{
@输入（）英雄：英雄[]；
@输入（）选择英雄；
构造函数（）{}
恩戈尼尼特（）{
console.log（this.heroses，'masterheroses'）
}
}
details.component.ts
从“/../Hero”导入{Hero}；
从'@angular/core'导入{Component，OnInit，Input}；
@组成部分({
选择器：“应用程序详细信息”，
templateUrl:'./detail.component.html'，
样式URL:['./detail.component.scss']
})
导出类DetailComponent实现OnInit{
@输入（）选择英雄：英雄；
构造函数（）{}
恩戈尼尼特（）{
console.log（this.selectedHero）
}
}
**app.component.html**
'''
英雄之旅
'''
**master.component.html**
'''


Id:{{hero.Id}


姓名：{{hero.Name}


'''
**详图构件**
'''
选定的英雄是：{{selectedHero.name}
Id:{{selectedHero.Id}

名称：{{selectedHero.Name}

---

在app.component selectedHero中，已将数据传递给details组件。

在DetailComponent中，父组件的数据更改将在ngOnChanges生命周期挂钩上处理

export class DetailComponent implements OnInit, OnChanges {
      @Input() selectedHero:Hero;
      constructor() { }

        ngOnInit() {
           console.log(this.selectedHero)
        }

        ngOnChanges() {
           console.log(this.selectedHero)
        }

    }

---

这对我不起作用，此.selectedHero未定义。您可以尝试从服务中使用Behavior Subject。使用service.subject.next（）从父组件发出；在子组件中，您可以使用service.subject.subscribe（）方法进行访问。