Hình ảnh 2 đăng ký có thể quan sát được không kích hoạt

Question

Tôi gặp vấn đề với đăng ký không thể kích hoạt được.

Tôi có một bố trí sử dụng phía nav bố trí chỉ thị tìm kiếm như thế này:

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

Những gì tôi cần phải làm là mở nav phía từ các thành phần mà router-ổ cắm đang hiển thị.

Một trong những thành phần có thể trông như thế này:

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

} 

Tôi đã tạo ra một dịch vụ mà trả về một thể quan sát được như thế này:

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

} 

Cuối cùng mã cho các tầng lớp phụ huynh (thuộc với bố cục nav bên 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"); 
    }); 
    } 
} 

Bây giờ vấn đề của tôi là đăng ký thành phần ứng dụng không kích hoạt, tuy nhiên, đăng ký trong thành phần Trang chủ (đó là những gì màn hình bộ định tuyến xuất hiện) được kích hoạt như mong đợi.

Tôi có thiếu gì đó ở đây không?

tôi theo hướng dẫn này: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Answer 1

Các ví dụ dịch vụ tương tự không được chia sẻ trên App và chủ các thành phần của bạn bởi vì bạn đã liệt kê SidenavService như một nhà cung cấp cho cả hai.

Khi bạn xác định nhà cung cấp dịch vụ trong mục trang trí thành phần, dịch vụ đó sau đó khả dụng cho thành phần đó và tất cả các thành phần của nó dưới dạng singleton, nghĩa là cùng một trường hợp dịch vụ sẽ được sử dụng.

Nếu bạn xác định lại nhà cung cấp trong thành phần con, nó sẽ tạo một trường hợp mới của dịch vụ và sẽ không còn chia sẻ cùng một cá thể dịch vụ với tư cách là phụ huynh/tổ tiên của nó nữa.

Nếu bạn đang sử dụng SidenavService trong cả ứng dụng và thành phần Trang chủ và cần cùng một trường hợp, bạn chỉ nên cung cấp trong thành phần ứng dụng và xóa nó khỏi mục nhập providers của Trang chủ.

Để biết thêm thông tin về DI, có một chi của các liên kết sau đây: https://angular.io/docs/ts/latest/guide/dependency-injection.html https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html