バインディングデータコンポーネント間の角度2 ui-router <=>親状態<=>子状態

Question

ここに私がしようとしていることの要点があります。 Angular2 MaterialのDark/Lightテーマのヘッダーコンポーネントがあります。ヘッダーコンポーネントは、「メイン」状態の内部に存在します。私は、私のmain.homeと他のmain.child状態が生きる、< ui-view >というネストされたタグを持っています。私がisDarkThemeをトグルすると、mainはそれを取得します。[class.mg2-darkTheme] = "isDarkTheme" = "isDarkTheme"はトグルしますが、メインにある子供たちは凍りつきます。しないでください、そして彼らのテーマは変わりません。

/*別のアプローチがある場合、私はそれを聞いて嬉しいですが、私はAngularJS1.xスキルを使って、親と子の間でデータを双方向でバインドしようとしています。まだ成功していません... */

AngularJS1.xとui-routerのデータを渡すことは非常に直感的でした。オブジェクトを解決するか、それ以上には、$ scope。$ parent.mainを取得して、子ルートの双方向の境界にアクセスすることができます。 Angular2とui-routerはちょっと難しいです。

ドキュメントui-router https://ui-router.github.io/ng2/で、パラメータparamを指すだけです。しかし、私はIDにナビゲートしていません。私は親の間でデータをバインドしたいだけです< =>子（単純なブールトグル）。

私は、親 'メイン'状態のコンポーネント 'header-menu'から親 'メイン'自身へのデータ（... isDarkThemeのブール値）を渡してから、子状態'main.home'。

'main.component'にisDarkThemeブール値があります。これは、 'header-menu.component'への@Inputであり、そこにトグルされ、メインに戻ります。

ヘッダ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

[OK]を、私はあなたがやろうとか理解している場合： 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にあなたをお勧めしますようです。あなたのコードは少し乱雑です（犯罪はありません）。サービスを作成すると読みやすくなります。

言い換えれば、InputとOutputで永続化したい場合は、HomeとMainの間に直接関係を作り、Mainから値を出してください。ような何か：

あなたが望むように、この答えは動作しないので、もしあなたがここに任意のルータを必要としない...、私は非常にplunker