Angulaire 2 observable d'abonnement pas de déclenchement
J'ai un problème avec un abonnement à un observables pas de déclenchement.
J'ai une mise en page en utilisant le côté de nav disposition de la directive qui ressemble à ceci:
<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>
Ce dont j'ai besoin pour faire est d'ouvrir le côté de nav à partir du composant que le routeur de la sortie de l'affichage.
L'un de ces composants pourrait ressembler à ceci:
@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");
}
}
J'ai créé un service qui retourne un observables comme ceci:
@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);
}
}
Enfin, le code de la classe parent (qui appartient avec le côté nav mise en page HTML):
@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");
});
}
}
Maintenant, mon problème, c'est que l'abonnement à l'Application de la composante ne déclenche pas, toutefois, la souscription à Domicile dans le composant (qui est ce que le routeur de sortie affiche) est déclenché comme prévu.
Suis-je manqué quelque chose?
J'ai suivi ce guide: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectionnel-service
OriginalL'auteur mda144 | 2016-06-25
Vous devez vous connecter pour publier un commentaire.
La même instance de service n'est pas partagés au sein de votre Application et de la Maison des composants parce que vous avez énumérés
SidenavService
en tant que fournisseur pour les deux.Lorsque vous définissez prestataire de services dans le
providers
entrée d'un Composant décorateur, que le service est alors disponible pour ce composant et tous ses enfants comme un singleton, ce qui signifie la même instance du service sera utilisé.Si vous redéfinissez un fournisseur dans un composant enfant, il va créer un nouveau instance du service et ne partagent plus la même instance de service en tant que parent/ancêtre.
Si vous utilisez
SidenavService
dans l'App et de la Maison des composants et ont besoin de la même instance, vous ne devez fournir dans l'App composant et de le retirer de laproviders
entrée de la Maison.Pour plus d'informations sur DI, à lire les liens suivants:
https://angular.io/docs/ts/latest/guide/dependency-injection.html
https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html
Merci Michael!!.Vous m'avez sauvé
génial, qui m'a beaucoup aidé !
Merci et j'ai donné un vote
OriginalL'auteur Michael
Si vous injectez le nom du Service sur tous les composants. Il peut ne pas fonctionner. Veuillez faire attention.
OriginalL'auteur jsam