Angular2：navbarデータを更新しますか？

Question

私は、次の達成する方法についてのいくつかの方向性を持っているしたいと思います：navbarとhomepage：

私は2つの別々のコンポーネントを持っています。

navbarには、city nameのプレースホルダがあります。

ホームページには、1つが都市のフィールドであるフォームコンポーネントがあります。フォーム上で選択した都市に応じて、navbarを都市名で更新したいと思います。

誰かが私にこれを解決する方法を教えてもらえますか？ご協力ありがとうございました。

Answer 1

あなたは2つのオプションがあります。

1. は、ラッパーコンポーネントを持っており、共有サービスを使用し

2. をデータを共有しています。

私はあなたが最初のオプションを提案します、それはきちんとしたデザインだからです。

最初のオプションの例： https://plnkr.co/edit/EDrQsxxCeCVhXoQcra4i?p=preview

@Component({ 
    selector: 'my-app', 
    template: ` 
    <mynavbar [navbarData] = "commonData"> </mynavbar> 
    <div> 
     <h2>Hello {{name}}</h2> 
    </div> 

    <somecomponent [someComponentData]="commonData"> </somecomponent> 
    `, 
}) 
export class App { 
    name:string; 
    commonData; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}`; 
    this.commonData = { cityName: 'SpringField' }; 
    } 
} 

番目のオプションの例は： https://plnkr.co/edit/Xob4jNuIX0DtvGj5gtIx?p=preview

@Injectable() 
export class SharedService{ 
    commonData; 
    constructor(){ 
    this.commonData = { cityName: 'SpringField' }; 
    } 
} 

Answer 2

あなたが探しているのは、出力または入力です。以下は、navbarがホームページコンポーネント内にあると仮定していますが、コンセプトはあなたの特定の設定に関係なく適用されます。逆の場合は、コンポーネントからnavbarへの出力をスワップアウトするか、親コンポーネントに入力します。この例では

ホームページコンポーネント

@Component({ 
    template: `<my-navbar [city]="city"></my-navbar> 
      <form> 
       <input [(ngModel)]="city"></input> 
      </form>` 
}) 
export class HomePageComponent { 
    public city; 
} 

とナビゲーションバーコンポーネント

@Component({ 
    selector: 'my-navbar', 
    template: `<p>{{city}}</p> 
)} 
export class NavbarComponent { 
    @Input city; 
} 

あなたの家のコンポーネント内の都市の入力を変更するたびに、ナビゲーションバーの要素もリアルタイムで更新されます。