Angular 角度2：在组件之间共享属性

我在获取app.component.html文件以访问某些子组件的属性时遇到一些问题。我看了其他的例子，但没有得到任何对我有用的东西。我正在使用最新的2.0.0版本。下面是我的一些代码：

应用程序组件.ts

import { Component } from '@angular/core';
import { SellingComponent } from './selling.component';
import { GrowingComponent } from './growing.component';

@Component({
  selector: 'my-app',
  templateUrl: 'Areas/Plan/app/app.component.html',
  styleUrls: ['Areas/Plan/app/app.component.css']
})

export class AppComponent {

}

app.component.html:

<div class="sub-nav-dropdown">
    <div class="dropdown-toggle sub-nav-dropdown-button" type="button" data-toggle="dropdown">
        {{subnav}}
        <i class="fa fa-sort-desc"></i>
    </div>
    <ul class="dropdown-menu sub-nav-options" id="growSellNav">
        <li>
            <a routerLink="/Plan/Production/Selling" routerLinkActive="active" id="selling" class="">Selling</a> 
        </li>
        <li>
            <a routerLink="/Plan/Production/Growing" routerLinkActive="active" id="growing" class="">Growing</a> 
        </li>
     </ul>
</div>
<router-outlet></router-outlet>

---

创建用于在组件之间发送数据的新服务

component.interaction.service.ts

getSubNav = new Subject();
getSubNav$ = this.getSubNav.asObservable();
sendSubnav(text:string){
this.getSubNav.next(text);
}

app.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SellingComponent } from './selling.component';
import { GrowingComponent } from './growing.component';

@Component({
  selector: 'my-app',
  templateUrl: 'Areas/Plan/app/app.component.html',
  styleUrls: ['Areas/Plan/app/app.component.css']
})

export class AppComponent implements OnInit, OnDestroy {

subnav:string ="";
subscription:Subscription;

constructor(private ciService:ComponentService){}

ngOnInit(){}
  this.subscription = this.ciService.getSubnav$
    .subscribe((res:string) => this.subnav = res);
}

ngOnDestroy(){
  if(this.subscription){
    this.subscription.unsubscribe();
  }
}

然后呢,

export class GrowingComponent implements OnInit {
    public subnav = 'Growing';
    constructor(private ciService: ComponentService){}
    ngOnInit(): void {
        console.log('initializing GrowingComponent');
        this.ciService.sendSubnav(this.subnav);
    }
}

export class SellingComponent implements OnInit {
    public subnav = 'selling';
    constructor(private ciService: ComponentService){}
    ngOnInit(): void {
        console.log('initializing SellingComponent');
        this.ciService.sendSubnav(this.subnav);
    }
}

---

将

subnav

放入共享服务中。或者将

subnav

放在服务中的对象内——例如，

mySharedObj={subnav:value}--然后获取对AppComponent中对象的引用--this.sharedObj=MyService.getSharedObj（）；`--并在您的视图中使用
{{sharedObj.subnav}
。getSharedObj（）是我需要创建的函数，还是我需要导入一些东西才能使用它？这是您将在服务上创建的方法。您需要将服务导入所有三个组件，并将其注入所有三个组件构造函数。然后，您可以在服务上调用公共方法。如果需要更改通知，请考虑将MySyrdObjr作为RX主题：然后订阅AppDebug，并在子组件中发布/NeXT。
export class GrowingComponent implements OnInit {
    public subnav = 'Growing';
    constructor(private ciService: ComponentService){}
    ngOnInit(): void {
        console.log('initializing GrowingComponent');
        this.ciService.sendSubnav(this.subnav);
    }
}

export class SellingComponent implements OnInit {
    public subnav = 'selling';
    constructor(private ciService: ComponentService){}
    ngOnInit(): void {
        console.log('initializing SellingComponent');
        this.ciService.sendSubnav(this.subnav);
    }
}