Question

我想就如何完成以下事项有一些指示：

我有两个独立的组件：navbar和homepage。

在导航栏中，我有city name的占位符。

在主页中，我有一个表单组件，其中一个是城市字段。根据我在表单上选择的城市，我想用城市名称更新导航栏。

有人能让我知道如何解决这个问题吗？谢谢你的帮助。

Answer 1

您有两种选择：

拥有包装器组件并共享数据
使用共享服务。

我建议你先选择，因为它设计整洁。

第一个选项示例： 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在主页组件中，但无论您的特定设置如何，该概念都适用。如果反向只是将其从组件输出到导航栏，或将输入放在父组件中。

主页组件

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

在此示例中，每当您更改主页组件中的城市输入时，导航栏中的元素也将实时更新。

Angular2：更新导航栏数据？

2 个答案: