कोणीय 2 अवलोकन योग्य सदस्यता

Question

ट्रिगर नहीं कर रहा है मुझे एक अवलोकन योग्य ट्रिगरिंग की सदस्यता के साथ कोई समस्या नहीं है।

मैं एक लेआउट पक्ष एनएवी लेआउट के निर्देश इस तरह लग रही का उपयोग कर:

<md-sidenav-layout class="nav-bar"> 


    <md-sidenav #start> 
     <nav> 
      <a [routerLink]="['/home']">Home</a> 
     </nav> 
     <button md-button (click)="start.close()">Close</button> 
    </md-sidenav> 

    <router-outlet></router-outlet> 

</md-sidenav-layout> 

मैं क्या करने की जरूरत है खुला घटक है कि रूटर-आउटलेट प्रदर्शित कर रहा है से पक्ष एनएवी है।

ऐसा ही एक घटक इस प्रकार दिखाई देंगे:

@Injectable() 
export class SidenavService { 

    private toggle = new Subject<string>(); 
    private toggleObs = this.toggle.asObservable(); 

    getSidenavObs() { 
     return this.toggleObs; 
    } 

    toggleSidenav(state: string) { 
     this.toggle.next(state); 
    } 

} 

अंत में माता पिता के वर्ग के लिए कोड (उस के साथ संबंध रखता है:

@Component({ 

    providers: [SidenavService, MdIconRegistry], 
    directives: [MdIcon], 
    templateUrl: `<md-icon (click)="toggleSidenav()">menu</md-icon>`, 
    styleUrls: ["./home.component.scss"] 
}) 

export class Home { 

    myColor: string; 

    constructor(private sidenavService: SidenavService) { 
     this.myColor = "primary"; 

     this.sidenavService.getSidenavObs().subscribe(state => {console.log("state change")}); 
    } 


    toggleSidenav() { 

     this.sidenavService.toggleSidenav("open"); 
    } 

} 

मैं एक सेवा है जो इस तरह की एक नमूदार रिटर्न बनाया है साइड एनवी लेआउट एचटीएमएल):

@Component({ 
    providers: [MdSidenav, SidenavService], 
    directives: [ROUTER_DIRECTIVES, MD_SIDENAV_DIRECTIVES, MD_BUTTON_DIRECTIVES], 
    selector: "app", 
    templateUrl: "app.html", 
    styleUrls: ["./app.scss"], 
}) 

export class App { 

    subscription: Subscription; 

    constructor(private sidenavService: SidenavService, private sidenav: MdSidenav) { 
    this.subscription = sidenavService.getSidenavObs().subscribe(status => { 
     console.log("state change"); 
     sidenav.open(); 
    }, error => { 
     console.log(error); 
    },() => { 
     console.log("completed"); 
    }); 
    } 
} 

अब मेरी समस्या यह है कि सदस्यता ऐप घटक ट्रिगर नहीं करता है, हालांकि, होम घटक में सदस्यता (जो राउटर-आउटलेट डिस्प्ले है) अपेक्षित के रूप में ट्रिगर किया जाता है।

क्या मुझे यहां कुछ याद आ रही है? क्योंकि तुम दोनों के लिए एक प्रदाता के रूप में सूचीबद्ध किया है SidenavServicehttps://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Answer 1

एक ही सेवा उदाहरण आपके अनुप्रयोग और गृह घटकों के बीच साझा नहीं किया जा रहा है:

मैं इस गाइड का पालन किया।

जब आप एक घटक सजावट के providers प्रविष्टि में सेवा प्रदाता को परिभाषित करते हैं, तो वह सेवा उस घटक और उसके सभी बच्चों को सिंगलटन के रूप में उपलब्ध होती है, जिसका अर्थ है सेवा का एक ही उदाहरण उपयोग किया जाएगा।

यदि आप किसी बच्चे के घटक में प्रदाता को फिर से परिभाषित करते हैं, तो यह सेवा के उदाहरण नया बना देगा और अब उसी सेवा उदाहरण को उसके माता-पिता/पूर्वजों के रूप में साझा नहीं करेगा।

यदि आप ऐप और होम घटकों दोनों में SidenavService का उपयोग कर रहे हैं और उसी उदाहरण की आवश्यकता है, तो आपको इसे केवल ऐप घटक में प्रदान करना चाहिए और इसे providers घर की प्रविष्टि से हटा देना चाहिए। https://angular.io/docs/ts/latest/guide/dependency-injection.html https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html