@Output child 和 parent 之间的通信。 Angular 2(5)

Question

我正在尝试学习 angular 2 并尝试使用我的 child 组件中的数据在 parent 组件中设置一个变量。基本上我的 parent 视图中有一个副标题，我希望标题和一些 HTML 根据加载的内容 child 进行更改。

Parent 分量：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ParentComponent {
  childDetails: {title: String, helperBar: String};

  onChildLoaded(childData: {
    childTitle: string,
    childHelperBar: string
  }) {
    this.childDetails ={
      title: childData.childTitle,
      helperBar: childData.childHelperBar
    };
    console.log (childDetails);
  }
}

Child 分量：

import { Component, OnInit, ViewEncapsulation, Output, EventEmitter } 
from '@angular/core';

@Component({
  selector: 'app-first-child',
  templateUrl: './first-child.component.html',
  styleUrls: ['./first-child.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class FirstChildComponent implements OnInit {
  @Output() childLoaded = new EventEmitter<{childTitle: string, 
childHelperBar: string}>();

  constructor() { }

  ngOnInit() {
    this.childLoaded.emit({
      childTitle: 'Dashboard',
      childHelperBar: '<div class="test"><button>Dash Button</button>
</div>'
    });
  }

}

最后是我的 parent HTML:

<div class="subheader">
  <h1>{{ childDetails.title }}</h1>
  {{ childDetails.helperBar }}
</div>
<nav class="sidebar">

</nav>

<main role="main" class="">
  <router-outlet (childLoaded)="onChildLoaded($event)"></router-outlet>
</main>

我这辈子都无法使用这种方法，也无法确定哪里出了问题。我总是可以将副标题放在我的 children 中，但我不喜欢多次重复代码的想法，这会使我的布局更难实现。

Answer 1

你收到了吗？ $event 在你的父方法中？

如果是，那么为什么要在父 class 方法中使用 let childDetails ={}。相反，你应该使用 this.childDetails={}

onChildLoaded($event){
 this.childDetails ={ title: $event.childTitle, helperBar: $event.childHelperBar }; 
console.log (childDetails); 
}

和父 html 应该是

<div class="subheader"> <h1>{{ childDetails.title }}</h1> {{ childDetails.helperBar }} </div> 
<nav class="sidebar"> </nav> 
<main role="main" class="">
 <app-first-child (childLoaded)="onChildLoaded($event)"></app-first-child> </main>

如果您不想使用 <app-first-child/> 那么您应该使用共享服务

Answer 2

最好的方法是利用服务和 observable 这样，每当 child 组件发生变化时，新数据将立即反映在 parent 组件中。

在你的 service.ts,

import { Subject } from 'rxjs/Subject'
import { Observable } from 'rxjs/Rx';

@Injectable()
export class myService {

  private pageName = new Subject<string>();

  pageNameChange$ = this.pageName.asObservable();
  changedComponentName(option:string){
        this.pageName.next(option);
  }
}

在您的 child 组件中，

child 组件 1

public ngOnInit() {
  this.myService.changedComponentName('child1');
}

child 组件 2

public ngOnInit() {
   this.myService.changedComponentName('child2');
}

等等..

现在，要在 parent 组件中获取更改后的组件名称，

parent component.ts

import { Subscription } from 'rxjs';

export class parentComponent {

    private subscription:Subscription;

    constructor(private myService:myService){

        this.myService.pageNameChange$.subscribe( /* get called on every child page changes*/
         newPageName => {

        console.log(newPageName); // you get your passed component name ( child1 / child2 /etc.. here in the 'newPageName' variable
    });
  }
}

@Output child 和 parent 之间的通信。 Angular 2(5)

@Output communication between child and parent. Angular 2(5)

javascript

angular2-routing

angular