角2：コンポーネント間で属性を共有する

Question

私のapp.component.htmlファイルをいくつかの子コンポーネントの属性にアクセスさせるのに問題があります。私は他の例を見てきましたが、私のために働くものは何も得ていませんでした。私は最新の2.0.0バージョンを使用しています。ここに私のコードのいくつかを見ては、次のとおりです。ルータのコンセントが吐き出すます

<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> 

：

app.component.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 HTMLをgrowing.component.htmlとselling.component.htmlから選択します。 growing.component.tsとselling.component.tsでは、私は{{subnav}}がapp.component.htmlファイルにあるところに表示されるsubnav属性を持っていますが、動作させることはできません。ここでは、これらの他のコンポーネントからコードされています

export class GrowingComponent implements OnInit { 
    public subnav = 'Growing'; 

    ngOnInit(): void { 
     console.log('initializing GrowingComponent'); 
    } 
} 

export class SellingComponent implements OnInit { 
    public subnav = 'selling'; 

    ngOnInit(): void { 
     console.log('initializing SellingComponent'); 
    } 
} 

Answer 1

は、コンポーネント間のデータを送信するための新しいサービスを作成します。共有サービスで

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