綁定數據組件之間的角度2 ui路由器<=>父母狀態<=>子狀態

Question

這是我正在嘗試做的要點。我有一個包含Angular2 Material的Dark/Light主題的標頭組件。標題組件位於「主」狀態的內部。我有一個嵌套的< ui-view >標籤，我的main.home和其他main.child狀態將會存在。當我切換isDarkTheme時，主要獲取它，用[class.mg2-darkTheme] =「isDarkTheme」切換作品，但腸道中居住着主要的孩子。不要，他們的主題不會改變。

/*如果還有其他方法，我會很高興聽到它，但我一直在嘗試使用我的AngularJS1.x技能，試圖雙向綁定父母和孩子之間的數據，目前還沒有成功...... */

在AngularJS1.x和ui-router中傳遞數據非常直觀。只需解析一個對象，或者更好的辦法是獲取$ scope。$ parent.main，並且您可以訪問整個父路由的子路由，雙向綁定。 Angular2和ui-router有點具有挑戰性。

我在尋找路由器https://ui-router.github.io/ng2/只是指向路由參數。但我沒有導航到：id。我只想綁定父級< =>孩子（只是一個簡單的布爾切換）之間的數據。

我試圖從父'main'狀態的組件'header-menu'傳遞數據（... isDarkTheme的布爾值）到父'main'本身，然後傳遞給子狀態'main.home'。

'main.component'有一個isDarkTheme布爾值，它是@Input到'header-menu.component'，在那裏切換，然後返回到main。

頭-menu.component.ts：

import { Component, Input, Output, EventEmitter } from '@angular/core'; 
@Component({ 
    selector: 'header-menu', 
    templateUrl: './header-menu.component.html', 
    styleUrls: ['../shared/material-theme.scss', './header-menu.component.scss'] 
}) 
export class HeaderMenuComponent { 
    // this is set in main and passed in as attr in main.html 
    @Input() headerIsDarkTheme: boolean; 
    // guessing I pass this bool back out with emitter... 
    @Output() themeOnClicked = new EventEmitter<boolean>; 
    notifyParentTheme(): void { 
     this.headerIsDarkTheme = !this.headerIsDarkTheme; 
     this.notifyParentTheme.emit(this.headerIsDarkTheme); 
    } 
} 

頭-menu.component.html：

<div [class.mg2-darkTheme]='headerIsDarkTheme'>..</div> 
<button (click)="notifyParentTheme()" 

main.component.ts：

import { Component, OnInit } from '@angular/core'; 
@Component({ 
    selector: 'main-cmp', 
    templateUrl: './main.component.ts', 
    styleUrls: ['../shared/material-theme.scss'] 
}) 
export class MainComponent implements OnInit { 
    isDarkTheme: boolean; 

    NgOnInit(){ 
     // initializing here... perhaps a better place to init... 
     this.isDarkTheme = false; 
    } 
    listenForTheme(isDarkTheme: boolean): void { 
     this.isDarkTheme = isDarkTheme; 

    /**************************************** 
    * MAIN QUESTION 
    * How do I pass this theme down to the main.home state? 
    * 
    ****************************************/  
    } 
} 

main.component .html：

<div [class.mg2-darkTheme]="isDarkTheme"> 

    <!-- pass in isDarktheme from 'main' into header-menu, header receives with headerIsDarkTheme --> 
    <!-- receive toggled theme from header-menu, event (notifyParentTheme) gets the event, then sends to method processHeaderTheme($event) --> 
    <header-menu [ headerIsDarkTheme ]="isDarkTheme" 
       (themeOnClicked)="listenForTheme($event)"> 
    </header-menu> 

    <!-- I want to pass this into the ui-view to toggle the theme --> 
    <!-- WHY? because the Angular2 Material theme doesn't work in ui-view --> 
    <!-- But darkThem works just using a component like <home-cmp></home-cmp> --> 
    <ui-view></ui-view> 
</div> 

main.home.component.html：

<div [class.mg2-darkTheme]="homeIsDarkTheme">...</div> 

main.home.component.ts

import { Component, Input } from '@angular/core'; 
@Component({ 
    selector: 'home-cmp', 
    templateUrl: './home.component.html' 
}) 
export class HomeComponent { 
    @Input() homeIsDarkTheme: boolean; 
} 

states.ts

... 
export const mainState = { 
    name: 'main', 
    // url: '/main', 
    component: MainComponent 
}; 
export const homeState = { 
    name: 'main.home', 
    url: '/home', 
    component: HomeComponent 
}; 

router.config.ts

import {UIRouter} from "ui-router-ng2"; 
import {Injector, Injectable} from "@angular/core"; 

/** UIRouter Config */ 
export function uiRouterConfigFn(router: UIRouter, injector: Injector) { 
    // If no URL matches, go to the `hello` state by default 
    router.urlService.rules.otherwise({ state: 'main' }); 
} 

app.module.ts .... const INITIAL_STATES = [ mainState， homeState ];

imports: [... 
    UIRouterModule.forRoot({ 
     states: INITIAL_STATES, 
     useHash: true, 
     config: uiRouterConfigFn 
    })... 

Answer 1

好吧，如果我理解你要做的： MainComponent提供初始isDarkTheme並聽取HeaderMenuComponent變革

//MainComponent html 
<header-menu [ headerIsDarkTheme ]="isDarkTheme" 
       (themeOnClicked)="listenForTheme($event)"> 
    </header-menu> 

//MainComponent 
isDarkTheme: boolean = false; //you can initialize isDarkTheme here 

listenForTheme(isDarkTheme: boolean): void { 
     this.isDarkTheme = isDarkTheme; 
    } 

HeaderMenuComponent得到headerIsDarkTheme和任何變化通知主：

//HeaderMenuComponent html 
<button (click)="notifyParentTheme()">Notify Parent</button> 

//HeaderMenuComponent 
@Input() headerIsDarkTheme: boolean; 

@Output() themeOnClicked = new EventEmitter<boolean>; //you'll emit a boolean not a type headerIsDarkTheme 
notifyParentTheme(): void { 
     this.headerIsDarkTheme = !this.headerIsDarkTheme; 
     this.themeOnClicked.emit(this.headerIsDarkTheme); //change notifyParentTheme to themeOnClicked 
    } 

編輯：所以你的主要問題stion是如何將headerIsDarkTheme傳遞給HomeComponent的。

//HomeComponent html 
<div [class.mg2-darkTheme]="homeIsDarkTheme">...</div> 

好像你沒有HomeComponent和MainComponent之間的直接互動做，所以在HomeComponent輸入是無用

export class HomeComponent { 
    @Input() homeIsDarkTheme: boolean;//you can't get your theme with this input 
} 

我建議你create a service。你的代碼很混亂（沒有冒犯性），創建一個服務將更具可讀性。

也就是說，如果您想要堅持輸入和輸出，請在Home和Main之間創建一個直接關係，並從Main發出值。喜歡的東西：

所以你不需要任何路由器在這裏...如果這個答案不工作，只要你想，我強烈建議你提供一個plunker