Javascript @输出子级和父级之间的通信。角度2（5）

我试图学习angular 2，并试图在父组件中使用子组件的数据设置一个变量。基本上，我在我的父视图中有一个副标题，我想根据加载的子视图更改标题和一些HTML

父组件：

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);
  }
}

子组件：

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>'
    });
  }

}

最后是我的父母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>

就我的一生而言，我无法用这种方法来工作，也无法指出我哪里出了问题。我总是可以在我的孩子身上加上副标题，但我不喜欢重复这么多次代码，这会让我的布局更难实现

你得到了什么$父方法中的事件

如果是，那么为什么在父类方法中使用let childDetails={}。相反，您应该使用这个.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>

---

如果您不想使用共享服务，那么您应该使用共享服务。最好的方法是使用服务和可观察服务，这样无论何时子组件发生更改，新数据都会立即反映在父组件中

在你的服务中

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);
  }
}

子组件2

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

等等

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

父组件.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
    });
  }
}

---

加载在路由器出口内的组件与封装路由器的组件之间没有父子关系。您应该使用其他方法，如共享服务。因此，如果使用此方法替换，该方法是否可行？显然不适合我，但只是为了确保我得到它。无论如何，感谢您的投入，将继续服务，干杯@Cheekumz，最好的方法是使用服务，但若你们想使用你们正在寻找的路由器outlett是激活事件，检查这个，干杯！！对不起，这实际上是个错误，我一直在用这个。在我的代码中。我已经相应地更新了我的问题：非常感谢。

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

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
    });
  }
}